2020-11-20：echarts相关（echarts相关事件）

1、echarts

柱状图：

series: [{
          name: '进站',
          type: 'bar',
          barWidth: '25%',// 柱状的宽度
          barGap: '60%',// 柱状之间的距离
          itemStyle: {
            normal: {
              color: '#FFCE2C'
            }
          },
          label: {
            show: true,
            position: 'top',
            fontSize: 11,
            color: '#3AC712',
            distance: 1// 柱状图上的位子距离图形元素的距离
          },// 各个柱状图上的文字
          data: [10, 30, 40, 120, 50]
        },
        {
          name: '出站',
          type: 'bar',
          barWidth: '25%',
          itemStyle: {
            normal: {
              color: '#00FFFF'
            }
          },
          label: {
            show: true,
            position: 'top'
          },
          data: [5, 40, 60, 110, 40]
        }]

2、axisTick

坐标轴刻度相关设置。

3、axisLabel

坐标轴刻度标签的相关设置。

axisLabel: {
            color: 'white',
            margin: 5,
            textStyle: {
              fontFamily: 'PingFang-SC-Regular',
              fontSize: 7
            }
          }

4、echarts图表自适应 容器大小更改canvas随之改变

window.onresize = this.chart.resize // 但是侧边栏开关无法重新加载

image.png

若是侧边栏！！！

监听侧边栏收缩的事件后resize,但是：侧边栏展开收缩一般都是做了动画的，若立刻执行resize，侧边栏的长宽其实并未发生改变。所以加一个定时器。

eg:
 watch: {
    isFull() {
      setTimeout(() => {
        this.chart.resize()
      }, 300)
    }
  },

5、timeline

他的长度设置可通过left，right属性值来改变。
鼠标移入播放停止：

  this.chart.on('mouseover', () => {
        this.chart.dispatchAction({
          type: 'timelinePlayChange',
          playState: false
        })
      })

鼠标移出播放继续：

   this.chart.on('mouseout', () => {
        this.chart.dispatchAction({
          type: 'timelinePlayChange',
          playState: true
        })
      })

6、echarts的点击事件多次触发解决：

在画触发点击事件的柱状图时，首先要加上一个off事件： myCharts.off('click')

7、echarts图例的大小

  legend: {
          data: ['年准点率', '年兑现率'],
          top: -5,
          itemHeight: 10,//修改icon图形大小
          textStyle: {
            color: '#FFFFFF',
            fontSize: 10
          }
        },

8、颜色的修改

color写在option里

image.png

9、图例竖直居中

在legend里top：'center'

10、echarts嵌入图

image.png

image.png

11、echarts的legend换行

image.png

image.png