echarts使用总结（使用echarts画工字型标记线；无数据时设置纵坐标刻度0-1；tooltip数据展示；工具栏 toolBox 图标配置）

1. 使用echarts画标记线（工字型）

1.1 实现效果

1.2 使用属性

详细参数可查看echarts官网，markline属性
https://echarts.apache.org/zh/option.html#series-bar.markLine

1.3 代码实现

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: [
    {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    }
  ],
  yAxis: [
    {
      type: 'value',
    }
  ],
   toolbox: {
    feature: {
      magicType: {
        type: ['bar', 'line'],
      },
      iconStyle: {
        borderWidth: 10
      },
    }
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: [10, 52, 200, 334, 390, 330, 220],
      // 关键代码
      markLine: {
        symbol: "line", // 两头也是横线
        symbolSize: 18, // 长度18px
        lineStyle: { // 线的样式
          type: "solid",
          color: "#1DB163",
          width: 1,
        },
        data: [
          [
            // 按照起点-终点连接成一条线
            {
                xAxis: 'Tue',
                yAxis: 60
            }, // 起点
            {
                xAxis: 'Tue',
                yAxis: 80
            }, // 终点
          ]
        ]
      },
    }
  ]
};

option && myChart.setOption(option);

2. echarts图表数据为空时，设置纵坐标为0-1

2.1 实现效果

2.2 使用属性

详细参数可查看echarts官网，yAxis min max属性
https://echarts.apache.org/zh/option.html#yAxis.min

2.3 代码实现

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: [
    {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    }
  ],
  yAxis: [
    {
      type: 'value',
      // 关键代码
      // 设置最小值为0 最大值为1 即可实现无数据时 纵坐标仍有刻度
      min: 0,
      max: 1,
    }
  ],
   toolbox: {
    feature: {
      magicType: {
        type: ['bar', 'line'],
      },
      iconStyle: {
        borderWidth: 10
      },
    }
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: [],
    }
  ]
};

option && myChart.setOption(option);

3. tooltip 数据展示

3.1 实现效果

3.2 使用属性

详细参数可查看echarts官网，tooltip属性
https://echarts.apache.org/zh/option.html#grid.tooltip.formatter

3.3 代码实现

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

let xAxisData = [];
let data1 = [];
let data2 = [];
let data3 = [];
let data4 = [];
for (let i = 0; i < 10; i++) {
  xAxisData.push('Class' + i);
  data1.push(+(Math.random() * 2).toFixed(2));
  data2.push(+(Math.random() * 5).toFixed(2));
  data3.push(+(Math.random() + 0.3).toFixed(2));
  data4.push(+Math.random().toFixed(2));
}
var emphasisStyle = {
  itemStyle: {
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  }
};
option = {
  legend: {
    data: ['bar', 'bar2', 'bar3', 'bar4'],
    left: '10%'
  },
  toolbox: {
    feature: {
      magicType: {
        type: ['stack']
      },
      dataView: {}
    }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' 或'shadow'
    },
    formatter: (params) => {
      let docStyle = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:`;
      let result = `<div style="color: #20253B;font-size: 12px; line-height: 30px;">${params[0].name}<br/>`;
      params.forEach((data, index) => {
        let docColor = docStyle + data.color + '"></span>';
        result += `
          ${docColor} 
          ${data.seriesName}
          <span style="margin-left: 20px; float: right; ">￥${
            data.data
          }</span>
          ${index === params.length - 1 ? "" : "<br/>"}`;
      })
      result += "</div>";
      return result;
    }
  },
  xAxis: {
    data: xAxisData,
    name: 'X Axis',
    axisLine: { show: false },
  },
  yAxis: {
    minInterval: 1
  },
  color: ["#4875f6","#1db163","#ffb51b","#ff7979"],
  series: [
    {
      name: 'bar4',
      type: 'bar',
      stack: 'one',
      data: data4,
      z: 99
    },
    {
      name: 'bar',
      type: 'bar',
      stack: 'one',
      data: data3,
      z: 10,
    },
    {
      name: 'bar2',
      type: 'bar',
      stack: 'one',
      data: data2,
      z: 11,
    },
    {
      name: 'bar3',
      type: 'bar',
      stack: 'one',
      data: data1,
      z: 12
    },
  ]
};

option && myChart.setOption(option);

4. 工具栏 toolBox 图标配置

4.1 实现效果

4.2 使用属性

详细参数可查看echarts官网，toolbox属性 参见https://echarts.apache.org/zh/option.html#toolbox

4.3 代码实现

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  toolbox: {
          feature: {
            magicType: {
              type: ["bar", "line"],
              icon: {
                bar: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHKSURBVEiJ7dVNSFRRGAbg9zv3iMxiDPc3RDgzd65FdCchRIjZtBlw0UJiFm6SWhSBQS1bBW5cFCiYEgTqLGaTtGqpILaJcfIvuc1VXPiDm8qgdNQ5XxtnYYTd+ekqMe/y8PI952y+Q2PpTJKAEQAmAowkYARC3+5Jpd4HhY6nMywAmEGipYigwTpch4/TbViW0x44rC55lhb02s+giO0MR2znaU1gsCaAyQd6A0CSgV4Vi3dVD/tIIpGQAAYJ1AfStwj8KnI5bv9zeHPn2yMQtj+vzE16n+ZzTHgMzW+Uut5UQ7jbUG3OHdPsCAGAUldMgJ6wEA9KDW8lN85MM2g4GK0VTBHbGyXGs1C4MNtqOy0kjefMGPKWsqsnmoffHwrihdOGSb+qanMGwLBDDcXoz0N5VwJZEL4c7V3o+b3reV4BQH/VsLKdXmLcLMijRH5h8QeAF5Z19UNRGHvr69P7fi9fNmxovJPyYDK/uPy1dOa6H2crAcuCXTe3VQ3yp5zZrvbz4uZoLH6vkuFFLuZX3fmpsmG9LzeMRv2Whb5WCWxoEQZQPry2lt0FcL8S9G85r/9xHf5P4I2JiUxn0DCNpTNJAC8JuBgk/At+6Y366X1qFAAAAABJRU5ErkJggg==`,
                line: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFDSURBVEiJ7Zc/S8NAGIefNy2og4MfwE2SQhFpFTrU0cGlQwbpYF1V/FKCVqUu4uYgODmKdHDwX5b2C7i55F4Hm8Vqckk1Usiz5F5yued+vMdB5Pikp+TLUGGvDLCz3Za8rN1ur6nCmZOXMKLTad8KLOYujijEuVH+rYXcam3FGDYBHIerp4f7ftz8hMRbJc+rrVmZVXyEFkILFT9pemzipeqLZ4wcAss2bge5ttokSYnVCOifXC6Ze/y1p6S8eLMfLhUf0Y3ReC7t59bi7xKm6Wlm8aQJs4uZLOH4Wv/EdIhVtamqTds6Dvsei16IMhuNPx/x9aTiBbdS3yUEIAAgpDF692PtVuqNUMPn18f+TWqxeS8PSzPmUh2zarHBMUrGmQfSi4Pg7g04yCJNYjpOdSEuxDYcnZ6vKwwk7582hQGw/wEISHSC/xE5IAAAAABJRU5ErkJggg==`,
              },
            },
          },
          showTitle: false,
          right: 100,
          itemSize: 30,
          itemGap: -1,
        },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};