echarts配置项记录

不知名It水手

已于 2022-03-09 13:49:16 修改

阅读量228

点赞数

分类专栏： echarts图表样式文章标签： echarts

于 2021-06-26 16:30:59 首次发布

本文链接：https://blog.csdn.net/ityiy/article/details/118251027

版权

echarts图表样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

echarts柱状图样式记录

- 柱状图
- 轮播高亮展示

柱状图

    //初始化柱状图

    var myChart
    var option = {
        title: {
            text: '数量: 个',   //y轴单位
            textStyle: {
                color: '#D9EFFF',  //单位颜色
                fontSize: 15,   //单位大小
            }
        },
        tooltip: {
            trigger: 'axis',   .//触发鼠标移动到对应数据项 显示对应数据
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['已完成', '未完成'],    //图例
            right: 10,   //图例位置
            textStyle: {   //图例样式
                color: '#FFF',

            },
        },
        grid: {      //设置柱状图表格的大小
            left: '3%',   //柱状图左边 距离左边的距离
            right: '4%',   //柱状图右边距离右边的距离
            bottom: '3%',  //柱状图底部 距离底部的距离
            containLabel: true //grid 区域是否包含坐标轴的刻度标签
        },
        xAxis: [
            {
                type: 'category',
                data: ['一月','二月','三月'], //x轴数据
                //坐标轴字体颜色
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#D9EFFF'
                    }
                },
                axisLine: {    //坐标轴线
                    lineStyle: {
                        color: '#266090',//轴线颜色
                    }
                },
                splitLine: {   //网格线
                    lineStyle: {
                        color: '#86D9FF',
                        opacity: '0.3',
                    },
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                // name: '数量：个',   //这种方式也可以给y轴赋单位
                //  color:'#FFFFFF',
                axisLabel: {    //y轴标签样式
                    show: true,
                    textStyle: {
                        color: '#D9EFFF'
                    }
                },
                axisLine: {  //y轴线样式
                    lineStyle: {
                        color: '#266090',//轴线颜色
                    }
                },
                splitLine: {   //y轴网格样式
                    lineStyle: {
                        color: '#86D9FF',
                        opacity: '0.3',
                    },
                },
            }
        ],
        series: [
            {
                name: '已完成',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: ['12'],'13','14'],
                color: '#5AC0F5',
                barWidth:30,   //设置柱状图条的大小
            },
            {
                name: '未完成',
                type: 'bar',
                stack: '广告',
                emphasis: {
                    focus: 'series'
                },
                data:  ['12'],'13','14'],
                color: '#FB4A88',
                barWidth: 30,
            },

        ]
    };
    myChart = echarts.init(document.getElementById('bar-data'));
    myChart.setOption(option);

轮播高亮展示

    //轮播展示
    var currentIndex = -1;
    timer = setInterval(function () {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0, //表示series中的第几个data数据循环展示
            dataIndex: currentIndex
        });
        currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
        // 高亮当前图形
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
        });
        // 显示 tooltip
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: currentIndex
        })
    }, 2000);

}

1.legend图例属性

	 legend: {
	    type:'scroll', //图例多的时候 翻页展示
       pageIconSize: '8',	  //翻页按钮的大小  
       icon: 'rect', //图例样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
	   itemHeight: 10, //图例高度
	   itemWidth: 10,//图例宽度
	   left:''//图例距离左侧的距离
	   right:''//图例距离右侧的距离
	   top:''//图例距离顶部的距离
	   bottom:''//图例距离底部的距离
	   width:'' //图例整体的宽度
	   height:''//图例整体的高度
	   padding:[] //图例内边距
	   itemGap:''//图例每项之间的距离
	   itemStyle:{   //图例图形样式
	       borderColor:'red', //图例边框颜色
	       borderWidth:1, //图例边框宽度
	       borderType:'dotted' //图例边框 样式
	   },
	  lineStyle:{} //图例线的样式
	  },

2. grid属性

	  grid: {
	        left: '5%',
	        right: '1%',
	        bottom: '12%',
	        top: '5%',
	        containLabel: true
	      },

3.dataZoom区域缩放/滑动属性

	dataZoom: [
	        {
	          show: true, 
	          type: 'slider', //滑动条型数据区域缩放组件  
	          type:'inside',//内置型数据区域缩放组件
	          //  realtime: true,
	          // yAxisIndex: 0,
	            moveHandleSize: 0,//不展示上面那一层
	          xAxisIndex: 0,
	          startValue: 1,
	          endValue: 10,
	          zoomOnMouseWheel: false,
	          showDetail: false,
	          height: 15,
	          bottom: 30,
	          dataBackground: {
	            lineStyle: {
	              width: 10,
	              color: 'rgb(255, 255, 255)'
	            }
	          }
	
	        },
	      ],
```dataZoom=[                                      //区域缩放
    {
        id: 'dataZoomX',
        show:true,                              //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
        backgroundColor:"rgba(47,69,84,0)",  //组件的背景颜色
        type: 'slider',                         //slider表示有滑动块的，inside表示内置的
        dataBackground:{                        //数据阴影的样式。
            lineStyle:mylineStyle,              //阴影的线条样式
            areaStyle:myareaStyle,              //阴影的填充样式
        },
        fillerColor:"rgba(167,183,204,0.4)",  //选中范围的填充颜色。
        borderColor:"#ddd",                     //边框颜色。
        filterMode: 'filter',                   //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
                                                  //'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
                                                  //'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
                                                  //'none': 不过滤数据，只改变数轴范围。
        xAxisIndex:0,                            //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                        //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                       //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                    //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                                //数据窗口范围的起始百分比,表示30%
        end: 70,                                  //数据窗口范围的结束百分比,表示70%
        startValue:10,                           //数据窗口范围的起始数值
        endValue:100,                            //数据窗口范围的结束数值。
        orient:"horizontal",                    //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
        zoomLock:false,                          //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        throttle:100,                             //设置触发视图刷新的频率。单位为毫秒（ms）。
        zoomOnMouseWheel:true,                  //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                   //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
        left:"center",                           //组件离容器左侧的距离,'left', 'center', 'right','20%'
        top:"top",                                //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        right:"auto",                             //组件离容器右侧的距离,'20%'
        bottom:"auto",                            //组件离容器下侧的距离,'20%'
  
    },
    {
        id: 'dataZoomY',
        type: 'inside',
        filterMode: 'empty',
        disabled:false,                         //是否停止组件的功能。
        xAxisIndex:0,                           //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                       //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                      //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                   //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                               //数据窗口范围的起始百分比,表示30%
        end: 70,                                  //数据窗口范围的结束百分比,表示70%
        startValue:10,                           //数据窗口范围的起始数值
        endValue:100,                            //数据窗口范围的结束数值。
        orient:"horizontal",                    //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
        zoomLock:false,                          //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        throttle:100,                             //设置触发视图刷新的频率。单位为毫秒（ms）。
        zoomOnMouseWheel:true,                   //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                    //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
    }
]


**4.直角坐标系 grid 中的 y 轴**
  

```javascript
 yAxis: {
        type: 'value', //'category'
        name: '生产数量', //坐标轴名称
        position: 'left',//or right
        nameRotate: 90,//坐标轴名字旋转，角度值
        nameLocation: 'center',//坐标轴名称显示位置
        nameGap: 50,//坐标轴名称与轴线之间的距离。
        min://坐标轴刻度最小值
        max://坐标轴刻度最大值
        minInterval:1//自动计算的坐标轴最小间隔大小
        maxInterval://自动计算的坐标轴最大间隔大小
        interval://强制设置坐标轴分割间隔
        axisLine:{} //坐标线相关设置
        axisTick:{}//坐标刻度相关设置
        axisLabel :{}//坐标刻度标签相关设置
        
      },

 function initDoubleBarPlay(obj1, obj2, el) {
        var myChart;
        var _ydata = [];//y轴数据
        var _xdata = [];//x轴数据

        var _x1length, _x2length;//用来判断基线的单位位置距离
        obj1 = MaxToMin(obj1)
        obj2 = MaxToMin(obj2)
        _x1length = obj1.xdata.length;
        _x2length = obj1.xdata.length;
        _ydata = obj1.TempData[0].data.concat(obj2.TempData[0].data);
        _xdata = obj1.xdata.concat(obj2.xdata);

        if (obj1.xdata.length <= 1 && obj2.xdata.length <= 1 && obj1.xdata[0] == null && obj2.xdata[0] == null) {
            return
        }
        option = {
            title: {
                text: '奖励和检查不符前5名部门',
                left: 'center',
                top: 5,
                textStyle: {
                    fontWeight: 'normal',
                    color: '#000',
                }
            },
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: _xdata,
                axisTick: {
                    show: true,
                    interval: _x1length - 1,
                    length: 150,
                    lineStyle: {
                        opacity: 0.2
                    },


                },
                axisLabel: {
                    // interval: 0,
                    formatter: function (value) {
                        //x轴的文字改为竖版显示
                        //  console.log(value)
                        var str = value.split("");
                        return str.join("\n");
                    }
                    //rotate: 90,//倾斜度 -90 至 90 默认为0

                }
            },
            yAxis: {
                type: 'value',
                minInterval: 1,
                axisTick: {
                    show: false
                },
                axisLine: { show: false },
            },
            series: [
                {
                    data: _ydata,
                    barWidth: 15,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#ffc000', '#5b9bd5', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#c23531', '#2f4554', '#d48265'];
                                if (params.dataIndex < obj1.TempData[0].data.length) {
                                    return colorList[0]

                                } else {
                                    return colorList[1]
                                }
                            }
                        }
                    },
                    markLine:
                    {
                        data:
                            [
                                [

                                    {
                                        name: `奖励(个)`, xAxis: Math.floor(_x1length / 2), y: 0,
                                        lineStyle: { opacity: 0, color: '#69707F' },
                                        label: {
                                            show: true,
                                            color: '#000',
                                            opacity: 1
                                        }
                                    },
                                    // 终点
                                    { xAxis: Math.floor(_x1length / 2), y: 340 }
                                ],
                                [

                                    {
                                        name: `不符项(个)`, xAxis: _x1length + Math.floor(_x2length / 2), y: 0,
                                        lineStyle: { opacity: 0, color: '#69707F' },
                                        label: {
                                            show: true,
                                            color: '#000',
                                            opacity: 1
                                        }

                                    },
                                    // 终点
                                    { xAxis: _x1length + Math.floor(_x2length / 2), y: 340 }
                                ],
                            ],
                        // 不要动画
                        animation: false
                    }

                },


            ],

        };
        myChart = echarts.init(document.getElementById('pie-style' + el));
        myChart.setOption(option);
    }
```![在这里插入图片描述](https://img-blog.csdnimg.cn/7a54399cf71a4cff8ece7c59a9f10889.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBASVTmsLTmiYvkvp3kvp3lnKjmraQ=,size_15,color_FFFFFF,t_70,g_se,x_16)