echarts 日常记录

echarts日常记录

1. 鼠标首次划过图表，屏幕闪动问题

tooltip中加入以下属性：
tooltip: {
   transitionDuration: 0,
}

2. 柱状图数据滚动

 setContradictionFx (mdsjfltjXArr,mdsjfltjNormalData,mdsjfltjBigData,mdsjfltjPersonalData) {
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          bottom: '-7',
          textStyle: {
            lineHeight: 21,
            color: "#FFFFFF"
          }
        },
        grid: {
          top: '10',
          bottom: '50'
        },
        xAxis: {
          type: 'category',
          data: mdsjfltjXArr,
          // data: xArry,
          axisTick: {
            // alignWithLabel: true
          },
          axisLine: {
            show: true,
            symbol: ['none', 'none'],
            symbolOffset: [0, 15],
            lineStyle: {
              color: '#FFFFFF',
              opacity: 0.5
            }
          }
        },
        yAxis: {
          type: 'value',
          show: true,
          axisLine: {
            show: true,
            symbol: ['none', 'none'],
            lineStyle: {
              color: '#FFFFFF',
              opacity: 0.5
            }
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: ['#DDE1EE'],
              opacity: 0.1
            }
          }
        },
        dataZoom: [//滑动条
          {
            show: false,//是否显示滑动条
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 3 // 一次性展示6个。
          }
        ],
        series: [{
          data: mdsjfltjNormalData,
          type: 'bar',
          name: '一般',
          barMaxWidth: 30,
          itemStyle: {
            color: '#5080EA',
          }
        },
        {
          data: mdsjfltjPersonalData,
          type: 'bar',
          name: '个人',
          barMaxWidth: 30,
          itemStyle: {
            color: '#00FFCC',
          }
        },
        {
          data: mdsjfltjBigData,
          type: 'bar',
          name: '重大群体',
          barMaxWidth: 30,
          itemStyle: {
            color: '#586B8D',
          }
        }]
      };
      setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == 8) {
          option.dataZoom[0].endValue = 3;
          option.dataZoom[0].startValue = 0;
        }
        else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);
      }, 2000)
      let myChart = echarts.init(this.$refs['contradictionFx']);
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

3. legend 滚动相关设置

legend: {
   bottom: '-12',
   left: '8%',
   right: '8%',
   type: 'scroll',
   orient: 'horizontal', //水平分布还是垂直分布
   borderRadius: 3,
   padding: 20,
   textStyle: {
      lineHeight: 21,
      color: "white"
   },
   pageIconInactiveColor: '#fefefe',//向左或向右无法点击的时候的颜色
   pageIconColor: 'gold',// 左右箭头能点击的颜色
   pageTextStyle: {
       color: 'white'// 字体颜色
   }
},