echarts相关

动态设置serise

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) }）;