关注迅速公众平台

关注迅速公众平台

关注迅速公众平台

关注微信联系人

企业电话:021-64391578

EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等


<script> function getChartsLine() { var myChart = echarts.init(document.getElementById('progress'),'macarons'); var option = {
            title: {
                text: '工程折线图', //主标题  textStyle:{
                    color:'#0DB9F2', //颜色 fontStyle:'normal', //风格 fontWeight:'normal', //粗细 fontFamily:'Microsoft yahei', //字体 fontSize:14, //大小 align:'center' //水平对齐  },
                subtext:'副标题', //副标题 subtextStyle:{ //对应样式 color:'#F27CDE',
                    fontSize:14 },
                itemGap:7 },
            grid:{ //显示数据的图表位于当前canvas的坐标轴 x:50,
                y:55,
                x2:50,
                y2:60,
                borderWidth:1 },
            tooltip: {
                trigger: 'axis' },
            legend: {
                data:["计划完成","实际完成"]
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
            },
            yAxis: {
                type: 'value', //默认以千分位显示,不想用的可以在这加一段 axisLabel : { //调整左侧Y轴刻度, 直接按对应数据显示 show:true,
                    showMinLabel:true,
                    showMaxLabel:true,
                    formatter: function (value) { return value;
                    }
                }
            },
            series: [
                {
                    name:"计划",
                    type:'line',
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 300, 2.3],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'},
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max' }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值' }
                                },
                                type: 'max',
                                name: '最高点' }]
                        ]
                    }
                },
                {
                    name:"实际",
                    type:'line',
                    data:[0, 0, 37, 0, 0, 15, 3036, 5572, 0, 0, 0, 0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'},
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max' }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值' }
                                },
                                type: 'max',
                                name: '最高点' }]
                        ]
                    }
                }
            ]
        };
        myChart.setOption(option);
    }

    getChartsLine(); </script>



相关推荐
短视频APP开发为何这么火热?短视频app开发前景还有吗?
酒类电商app开发需要多少钱?
校园导航app开发基础功能展示|导航app开发需要多少钱?
游戏电竞直播app开发概述
民宿app开放概述以及民宿app开发功能简介!

特别申明:本站的主旨在于收集互联网运营相关的干货知识,给运营小伙伴提供便利。 网站所收集到的公开内容均来自于互联网或用户投稿,并不代表本站认同其观点, 也不对网站内容的真实性负责,如有侵权,请联系站长删除

您可以联系我们

彼此协助, 彼此信任

方能将美好的蓝图兑现