echarts堆叠条形图Stacked Horizontal Bar鼠标悬停时tooltip展示每一列的总数量、修改legend样式为圆形

官网：

Examples - Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack

效果图：

关键代码：

完整代码：

  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
             <div id="main1" style="width: 1000px;height:600px;"></div>复制

    drawLine1(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('main1'))
      // 绘制图表
      myChart.setOption( {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          },
          formatter(a) {
            let res = '';
 
            let sum = 0;
            // console.log('a=',a)
 
            a.forEach((item, index) => {
              if (index === 0) {
                res += `${item.axisValue}<br/>`;
              }
              sum += item.value;
              res += `${item.marker} ${item.seriesName} : ${item.value}<br/>`;
              if (index === a.length - 1) {
                res += `总数 : ${sum}`;
              }
            });
            return res;
 
          },
        },
        legend: {
          bottom:-5,
          icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 10,  // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 40 // 设置间距
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8', '项目9', '项目10']
        },
        series: [
          {
            name: '已完成',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320, 390, 330, 320]
          },
          {
            name: '施工中',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210, 90, 230, 210]
          }
        ]
      });
    },复制