Bootstrap

eCharts 双柱折线图 原创

  const initOption = {
        // 在画布中的位置
        grid: {
          left: '15%',
          right: '10%',
          bottom: '20%'
        },
        //用不同样式的图例用数组写对应图例的样式
        legend: [
          {
            left: '23%',
            itemWidth: 12,
            itemHeight: 12,
            data: [
              {
                name: '签约人数'
              },
              {
                name: '履约人数'
              }
            ]
          },
          {
            right: '22%',
            itemWidth: 15,
            itemHeight: 7.5,
            data: [
              {
                name: '履约率'
              }
            ]
          }
        ],
        xAxis: {
          axisLabel: {
            interval: 0, // 强制设置坐标轴分割间隔
            // width: 50,
            color: '#6e7079',
            fontSize: 12,
            // rotate: 45,
            width: 110,
            overflow: 'truncate'
          },
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: [
        // 第一根y轴 如果不需要双y轴 直接删除即可
          {
            name: '人',
            type: 'value',
            min: 0
          },
        // 第二根y轴
          {
            name: '%',
            type: 'value',
            min: 0,
            splitLine: {
              show: false
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          confine: true,
           // 这边是根据要求给tooltip 提示框添加单位 如果不需要单位 删除即可 默认不带单位
          formatter: (params) => {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal =
                relVal +
                '<br/>' +
                params[i].marker +
                params[i].seriesName +
                '&nbsp;&nbsp;&nbsp;' +
                params[i].value +
                `${i === 2 ? '%' : '人'}`
            }
            return relVal
          }
        },
        series: [
          {
            name: '签约人数',
            type: 'bar', // 柱状图
            barWidth: '13', // 柱宽
            symbol: 'none',
            data: [], // 数据
            color: '#91cc75'
          },
          {
            name: '履约人数',
            type: 'bar',
            barWidth: '13',
            symbol: 'none',
            data: [],
            color: '#36c2cf'
          },
          {
            name: '履约率',
            type: 'line', // 折线图
            yAxisIndex: 1, // y轴索引
            // barWidth: '13',
            symbol: 'none',
            data: [],
            color: '#f1b45b'
          }
        ]
      }

eCharts 还是要多使用 多看文档 用多了就熟练了 很多时候的需求只是一个配置的事

;