echarts以散点图形式区分不同颜色,不同类型图标

在这里插入图片描述
图标使用的svg,在阿里巴巴图标库找的

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
  tooltip: {
    trigger: 'axis',
    formatter: function (a) {
      let list = [];
      let listItem = '';
      for (var i = 0; i < a.length; i++) {
        list.push(
          '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
            a[i].color +
            ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
            a[i].seriesName +
            '</span>&nbsp' +a[i].value[0] +'年' + 
            a[i].value[1] +
            '月'
        );
      }
      listItem = list.join('<br>');
      return '<div class="showBox">' + listItem + '</div>';
    }
  },
  legend: {
    data: ['验收项目', '资金批复', '项目施工', '审批项目']
  },
  xAxis: [
    {
      type: 'category',
      scale: false,
      axisLabel: {
        formatter: '{value} 年'
      },
      splitLine: {
        show: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      scale: false,
      axisLabel: {
        formatter: '{value} 月'
      },
      splitLine: {
        show: true
      }
    }
  ],
  series: [
    {
      name: '项目施工',
      symbolSize: 20,
      symbol:
        'path://M887 428.5h-76.584a299.128 299.128 0 0 1-88.477 183.274C858.844 684.743 953.315 826.852 958.744 991.5H65.256c5.43-164.648 99.9-306.757 236.805-379.726A299.128 299.128 0 0 1 213.584 428.5H138a30 30 0 0 1 0-60h75.4C227.042 226.3 339.939 113.1 482 98.993V62.5a30 30 0 1 1 60 0v36.493C684.061 113.1 796.958 226.3 810.6 368.5H887a30 30 0 0 1 0 60z m-754.731 503h759.462C867.218 806.682 782.7 703.386 669.458 652.884a300.157 300.157 0 0 1-314.916 0C241.3 703.386 156.782 806.682 132.269 931.5zM512 637.5c122.043 0 222.8-91.1 238.011-209H273.989C289.2 546.4 389.957 637.5 512 637.5z m-238.251-269H482V159.371c-108.889 13.581-195.117 100.1-208.251 209.129zM542 159.371V368.5h208.251C737.117 259.471 650.889 172.952 542 159.371z',
      data: [
        [2021, 3],
        [2021, 4],
        [2021, 5],
        [2021, 6],
        [2021, 7],
        [2021, 8],
        [2021, 9],
        [2021, 10],
        [2021, 11],
        [2021, 12]
      ],
      type: 'scatter'
    },
    {
      name: '审批项目',
      symbolSize: 20,
      symbol:
        'path://M909 959H619a50 50 0 0 1-50-50v-80a50 50 0 0 1 50-50h32.827l55.091-95.421a90 90 0 1 1 114.453-0.241L876.315 779H909a50 50 0 0 1 50 50v80a50 50 0 0 1-50 50zM764 584a30 30 0 1 0 30 30 30 30 0 0 0-30-30z m0.3 120.194L721.109 779h86.154zM899 859a20 20 0 0 0-20-20H649a20 20 0 0 0-20 20v20a20 20 0 0 0 20 20h230a20 20 0 0 0 20-20v-20zM467.205 627.043a29.979 29.979 0 1 1 0 59.957H245.979a29.979 29.979 0 1 1 0-59.957h221.226zM216 366.979A29.979 29.979 0 0 1 245.979 337h448.042a29.979 29.979 0 1 1 0 59.957H245.979A29.979 29.979 0 0 1 216 366.979zM581.021 542H245.979A29.979 29.979 0 0 1 216 512.021v-0.042A29.979 29.979 0 0 1 245.979 482h335.042A29.979 29.979 0 0 1 611 511.979v0.042A29.979 29.979 0 0 1 581.021 542zM845 482a30 30 0 0 1-30-30V145a20 20 0 0 0-20-20H145a20 20 0 0 0-20 20v734a20 20 0 0 0 20 20h337a30 30 0 0 1 0 60H115a50 50 0 0 1-50-50V115a50 50 0 0 1 50-50h710a50 50 0 0 1 50 50v337a30 30 0 0 1-30 30z',
      data: [
        [2021.0, 1.0],
        [2021.0, 2]
      ],
      type: 'scatter'
    },
    {
      name: '验收项目',
      symbolSize: 20,
      symbol:
        'path://M944.014 711.668L798.505 857.177 696.633 959.053h-96.869a30.514 30.514 0 0 1-30.293-30.3v-97.1l101.757-101.755 145.51-145.51a50 50 0 0 1 70.711 0l56.565 56.565a50 50 0 0 1 0 70.715z m-63.639-49.5l-14.142-14.142a20 20 0 0 0-28.285 0l-208.477 208.48v42.547h42.309l208.6-208.6a20 20 0 0 0-0.005-28.283z m-35.047-150.215a30 30 0 0 1-30-30v-337a20 20 0 0 0-20-20h-650a20 20 0 0 0-20 20v734a20 20 0 0 0 20 20h306a30 30 0 0 1 0 60h-336a50 50 0 0 1-50-50v-794a50 50 0 0 1 50-50h710a50 50 0 0 1 50 50v367a30 30 0 0 1-30 30z m-629-145.021a29.979 29.979 0 0 1 29.979-29.979h448.042a29.979 29.979 0 1 1 0 59.957H246.307a29.979 29.979 0 0 1-29.979-29.978z m365.021 175.021H246.307a29.979 29.979 0 0 1-29.979-29.979v-0.042a29.979 29.979 0 0 1 29.979-29.979h335.042a29.979 29.979 0 0 1 29.979 29.979v0.042a29.979 29.979 0 0 1-29.979 29.979z m-335.042 145a29.979 29.979 0 1 1 0-59.957h221.226a29.979 29.979 0 1 1 0 59.957H246.307z',
      data: [[2022, 2]],
      type: 'scatter'
    },
    {
      name: '资金批复',
      symbolSize: 20,
      symbol:
        'path://M488 722h421a50 50 0 0 1 50 50v80a50 50 0 0 1-50 50H488a50 50 0 0 1-50-50v-10H157a30 30 0 0 1-30-30V302h-12a50 50 0 0 1-50-50v-80a50 50 0 0 1 50-50h83a50 50 0 0 1 50 50v80a50 50 0 0 1-50 50h-11v180h251v-10a50 50 0 0 1 50-50h421a50 50 0 0 1 50 50v80a50 50 0 0 1-50 50H488a50 50 0 0 1-50-50v-10H187v240h251v-10a50 50 0 0 1 50-50z m10 100a20 20 0 0 0 20 20h361a20 20 0 0 0 20-20v-20a20 20 0 0 0-20-20H518a20 20 0 0 0-20 20v20zM187.594 222v-20a20 20 0 0 0-20-20H145a20 20 0 0 0-20 20v20a20 20 0 0 0 20 20h22.594a20 20 0 0 0 20-20zM498 522a20 20 0 0 0 20 20h361a20 20 0 0 0 20-20v-20a20 20 0 0 0-20-20H518a20 20 0 0 0-20 20v20z m411-220H358a50 50 0 0 1-50-50v-80a50 50 0 0 1 50-50h551a50 50 0 0 1 50 50v80a50 50 0 0 1-50 50z m-10-100a20 20 0 0 0-20-20H388a20 20 0 0 0-20 20v20a20 20 0 0 0 20 20h491a20 20 0 0 0 20-20v-20z',
      data: [[2022.0, 1]],
      type: 'scatter'
    }
  ]
};
option.setOption(option);
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值