echarts相关

动态设置serise

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

var Item = function () {   return {     type: 'bar',     barWidth : 20,     layout: 'none',//布局:"不采用任何布局"     coordinateSystem: 'cartesian2d',//使用的坐标系:"二维指教坐标系"     symbolSize: function (data) {//关系图节点标记大小       return data[2]     },     itemStyle: {//图形样式       normal: {//默认样式         label: {//图形上文本标签           show: true,           textStyle: {             color: '#333',//字体颜色             fontWeight: 'bold'//加粗           }         }       }     },     edgeSymbol: ['circle', 'arrow'],//边两端的标记类型     edgeSymbolSize: [4, 10],//边两端的标记大小     edgeLable: {       normal: {         textStyle: {           fontSize: 13,           fontWeight: 'bold',           fontFamily: '宋体'         }       }     },     lineStyle: {//关系边的线条样式       normal: {//线的颜色         color: '#2f4554'       }     }   } }

　　option为柱状图

const option = {
          dataZoom: {
            show: true, // 为true 滚动条出现
            realtime: true,
            type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
            height: 20, // 表示滚动条的高度，也就是粗细
            start: 0, // 表示默认展示20%～80%这一段。
            end: 100
          },
          title: {
            text: 'XXXXTITLE',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: legend,
            orient: 'vertical',  //垂直显示
            x: 'right', //居右显示
            show: true,
          },
          xAxis: {
            type: 'category',
            data: data.xData,
            axisLabel: {
              interval: 0,
              rotate: 40,
              formatter: function (value) {
                if (value.length > 16) {
                  return `${value.slice(0, 4)}...`
                }
                return value
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: '{value}'
            },
            show: true
          }
        }

动态设置

var Series = [];
        var color = ['rgb(24, 204, 156)','rgb(252, 71, 86)','rgb(255, 255, 0)'];
        var dataArr = data.data;
        for (let i = 0; i < legend.length; i++) {
          var legendData = legend[i];
          var it = new Item();
          it.name = legendData;
          it.data = dataArr[i][legendData];
          it.itemStyle.normal.color = color[i];
          Series.push(it);
        }
        option.series = Series;
        option && pOChart.setOption(option)

设置柱状图的穿透

 

//防止重复触发点击事件
if (pOChart._$handlers.click) {
  pOChart._$handlers.click.length = 0;
}

pOChart.on('click',(params) => { console.log(params) }）;