echarts 常用配置方法

echarts图表的一些配置

echarts图表自适应

//myechart为自己定义名字
//只适用一个图表
myechart.setOption(option);
window.onresize = ()=> {
     myechart.resize();
};
//适用多个图表
window.addEventListener('resize', () =>{
  this.myechart.resize()
})

柱状图背景色设置及圆角

//柱状图背景色 圆角
showBackground: true,
backgroundStyle:{
borderRadius: [15, 15, 15, 15],
color:"rgba(49,150,250,0.12)"
},

饼图去掉指示线指示文字

label: {
        normal: {
        position: "inner",
        show: false,
        },
       },

颜色渐变——线性渐变

itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  {
                    offset: 0,
                    color: "#fff",
                  },
                  {
                    offset: 1,
                    color: "#000",
                  },
                ]),
              },
            },

X轴坐标文本竖着放

axisLabel: {
            alignWithLabel: true,
            interval: 0,
            formatter:function(value){
              return value.split("").join("\n");
            },
          },

title点击事件

title:[{
	triggerEvent:true,//是否触发
}]

自定义tooltip

tooltip: {
            trigger: axis,//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用.
            //item 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。none 什么都不触发
            textStyle: {
            	color:'#000',//文字颜色
            },
            formatter:function(val){
            var str = `<img src="./hhh.png"></img><div>自己的样式</div>`
              return str;
            },
          },

数据图形

1. 设置高亮

myChart.dispatchAction({
    type: "highlight",
    //seriesIndex：number | array系列 index，可以是一个数组指定多个系列
    seriesIndex: 0,
    //dataIndex：number 数据的 index
    dataIndex: 1
})

2. 取消高亮

myChart.dispatchAction({
    type: "downplay",
    //seriesIndex：number | array   系列 index，可以是一个数组指定多个系列
    seriesIndex: 0,
    //dataIndex：number 数据的 index
    dataIndex: 1
})

图例状态

1. 默认选中图例

myChart.dispatchAction({
    type: 'legendSelect',
    // 图例名称
    name: string
})

2. 取消选中图例

myChart.dispatchAction({
    type: 'legendUnSelect',
    // 图例名称
    name: 'string'
})

3. 切换图例选中状态

myChart.dispatchAction({
    type: 'legendToggleSelect',
    // 图例名称
    name: string
})

4. 控制图例的滚动

myChart.dispatchAction({
    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})

点击事件

有些时候图表的点击事件会执行多次，解决方案

myChart.off("click") //事件名 click legendselectchanged ...
myChart.on("click",(data) =>{
	console.log(data)
})

销毁实例

有些业务场景需要，先销毁再创建

echarts.init().dispose
echarts.init()