vue使用echarts图表小结

注：部分效果为动图叠加

仪表盘

const getOption = (data, color) => {
  return {
    series: [
      {
        type: 'gauge',
        name: '最外层蓝圈',
        radius: '74%',
        startAngle: '225',
        endAngle: '-45',
        splitNumber: '10',
        pointer: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 1,
          },
        ],
        axisLine: {
          show: true,
          lineStyle: {
            color: [[1, 'rgba(0,99,190,1)']],
            width: 2,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0, 99, 190, 0.8)',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          length: 2,
          lineStyle: {
            color: '#051932',
            width: 1,
            type: 'solid',
          },
        },
        axisLabel: {
          show: false,
        },
      },
      {
        type: 'gauge',
        radius: '70%',
        startAngle: '225',
        endAngle: '-45',
        min: 0,
        max: 10,
        splitNumber: 10,
        pointer: {
          show: true,
          width: 2,
          itemStyle: {
            // 表盘指针的颜色
            color: '#57EAFF',
          },
        },
        detail: {
          offsetCenter: ['0%', '55%'],
          color: color,
          fontSize: 30,
        },
        data: data,
        title: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 2,
            color: '#051932',
          },
        },
        progress: {
          show: true,
          width: 5,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: '#11f656', // 0% 处的颜色
              },
              {
                offset: 1,
                color: color, // 100% 处的颜色
              },
            ]),
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          length: 2,
          lineStyle: {
            color: '#00377a',
            width: 2,
            type: 'solid',
          },
        },
        axisLabel: {
          show: false,
        },
        animationDuration: 1400,
      },
      {
        name: '表盘刻度',
        type: 'gauge',
        radius: '80%',
        startAngle: 225, //刻度起始
        endAngle: -45, //刻度结束
        min: 0,
        max: 10,
        splitNumber: 10,
        z: 4,
        axisTick: {
          show: false,
        },
        splitLine: {
          length: 2, //刻度节点线长度
          lineStyle: {
            width: 2,
            color: 'auto',
          }, //刻度节点线
        },
        axisLabel: {
          color: '#3F8ECA',
          fontSize: 10,
        }, //刻度节点文字颜色
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: [
              [0.2, '#2AF65F'],
              [0.4, '#B0D651'],
              [0.6, '#F2CB3E'],
              [0.8, '#F69D23'],
              [1, '#FF0100'],
            ],
            opacity: 0,
          },
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 10,
            name: '',
          },
        ],
      },
      {
        //底部半透明大圆环内圆
        type: 'pie',
        radius: '36%',
        center: ['50%', '50%'],
        z: 1,
        itemStyle: {
          color: 'rgba(0,6,33,0.7)',
        },
        emphasis: {
          scale: false,
        },
        tooltip: {
          show: false,
        },
        data: [10],
        animationType: 'scale',
      },
      {
        //底部半透明大圆环外圆
        type: 'pie',
        radius: '66%',
        center: ['50%', '50%'],
        z: 0,
        itemStyle: {
          color: new echarts.graphic.RadialGradient(
            0.5,
            0.5,
            0.7,
            [
              {
                offset: 0,
                color: 'rgb(8,128,238)',
              },
              {
                offset: 0.55,
                color: 'rgb(1,10,50)',
              },
              {
                offset: 1,
                color: 'rgb(8,128,238)',
              },
            ],
            false
          ),
        },
        emphasis: {
          scale: false,
        },
        tooltip: {
          show: false,
        },
        data: [10],
        animationType: 'scale',
      },
      {
        name: '小圆最内部圆',
        type: 'pie',
        emphasis: {
          scale: false,
        },
        legendHoverLink: false,
        radius: ['0%', '8%'],
        tooltip: {
          show: false,
        },
        z: 10,
        label: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: '2',
            itemStyle: {
              color: '#0E1327',
            },
          },
        ],
      },
      {
        name: '小圆蓝内圈',
        type: 'pie',
        emphasis: {
          scale: false,
        },
        legendHoverLink: false,
        radius: ['7%', '9%'],
        tooltip: {
          show: false,
        },
        z: 10,
        label: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: '2',
            itemStyle: {
              color: '#6FEDFF',
            },
          },
        ],
      },
      {
        name: '小圆蓝内外圈之间圆环',
        type: 'pie',
        emphasis: {
          scale: false,
        },
        legendHoverLink: false,
        tooltip: {
          show: false,
        },
        radius: ['9%', '14%'],
        z: 10,
        label: {
          show: false,
        },
        data: [
          {
            value: 0,
            name: '1',
            itemStyle: {
              color: 'red',
            },
          },
          {
            value: 100,
            name: '2',
            itemStyle: {
              color: '#0E1327',
            },
          },
        ],
      },
      {
        name: '小圆蓝外圈',
        type: 'pie',
        emphasis: {
          scale: false,
        },
        legendHoverLink: false,
        tooltip: {
          show: false,
        },
        radius: ['14%', '16%'],
        z: 10,
        label: {
          show: false,
        },
        data: [
          {
            value: 100,
            name: '2',
            itemStyle: {
              color: '#6FEDFF',
            },
          },
        ],
      },
    ],
  };
};

曲线图

三曲线

const getOption = (data) => {
  return {
    grid: {
      x: 42,
      y: 40,
      x2: 17,
      y2: 25,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: 'rgba(213,212,212,0.5)',
        },
      },
      backgroundColor: 'rgba(0,6,46,0.80)',
      borderColor: 'rgba(37,192,255,0.70)',
      formatter: function (params) {
        let color = ['#01C5FF', '#21E1B9', '#FFF21A'];
        let str =
          '<span style="font-size: 18px;color:#3EB5FF">' +
          params[0].axisValue +
          '</span>' +
          '<br />';
        params.forEach((item, index) => {
          str +=
            '<span style="display:inline-block;margin-right:5px;font-size: 18px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
            color[index] +
            '"></span>' +
            '<span style="display:inline-block;margin: 0 0 0 5px;font-size: 18px;color:#3EB5FF;width: 65px">' +
            item.seriesName +
            ' : ' +
            '</span>' +
            '<span style="display:inline-block;margin-left:20px;font-size: 18px;color:#25FFE5">' +
            item.data +
            '</span>' +
            '<br />';
        });
        return str;
      },
    },
    legend: {
      right: '1.5%',
      top: '2%',
      data: [
        {
          name: '高速',
          itemStyle: {
            color: '#01C5FF',
          },
          icon:
            'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
        },
        {
          name: '快速路',
          itemStyle: {
            color: '#00CD95',
          },
          icon:
            'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
        },
        {
          name: '主干道',
          itemStyle: {
            color: '#FFF21A',
          },
          icon:
            'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
        },
      ],
      itemWidth: 15,
      itemHeight: 15,
      itemGap: 30,
      selectedMode: true, //选择
      textStyle: {
        color: '#F1F2FF',
      },
    },
    xAxis: [
      {
        type: 'category',
        data: data.x,
        axisPointer: {
          type: 'shadow',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          color: '#F1F2FF',
          fontSize: 15,
          fontWeight: 500,
        },
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：km/h',
        nameTextStyle: {
          color: '#F1F2FF',
          fontSize: '16',
          padding: [0, 0, 0, 22],
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          color: '#F1F2FF',
          fontSize: 15,
          fontWeight: 500,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
          },
        },
      },
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
      },
    ],
    series: [
      {
        name: '高速',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        lineStyle: {
          color: '#01C5FF',
        },
        itemStyle: {
          smooth: true,
          color: '#01C5FF',
          shadowColor: 'rgba(1,197,255,0.2)',
          shadowBlur: 7.5,
        },
        z: 12,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(80,204,255,0.2)',
              },
              {
                offset: 1,
                color: 'rgba(80,204,255,0)',
              },
            ],
            false
          ),
          shadowColor: 'rgba(0,179,244, 0.5)',
          shadowBlur: 20,
        },
        data: data.high,
      },
      {
        name: '快速路',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        lineStyle: {
          color: '#00CD95',
        },
        itemStyle: {
          color: '#00CD95',
          shadowColor: 'rgba(33,225,185,0.2)',
          shadowBlur: 7.5,
        },
        z: 11,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(33,225,185,0.2)',
              },
              {
                offset: 1,
                color: 'rgba(80,204,255,0)',
              },
            ],
            false
          ),
          shadowColor: 'rgba(33,225,185,0.5)',
          shadowBlur: 20,
        },
        data: data.quick,
      },
      {
        name: '主干道',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        itemStyle: {
          color: '#FFDE00',
          shadowColor: 'rgba(223, 223, 67, 0.2)',
          shadowBlur: 7.5,
        },
        lineStyle: {
          color: '#FFDE00',
        },
        z: 10,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(223, 223, 67, 0.2)',
              },
              {
                offset: 1,
                color: 'rgba(80,204,255,0)',
              },
            ],
            false
          ),
          shadowColor: 'rgba(255,242,26,0.5)',
          shadowBlur: 20,
        },
        data: data.main,
      },
    ],
  };
};

双曲线

const getOption = (data) => {
  return {
    grid: {
      x: 60,
      y: 40,
      x2: 17,
      y2: 25,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: 'rgba(213,212,212,0.5)',
        },
      },
      backgroundColor: 'rgba(0,6,46,0.80)',
      borderColor: 'rgba(37,192,255,0.70)',
      textStyle: {
        color: '#3EB5FF',
        fontSize: '18',
      },
    },
    legend: {
      right: '1.5%',
      top: '2%',
      data: [
        {
          name: '预测指数',
          icon:
            'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
        },
        {
          name: '交通指数',
          icon:
            'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
        },
      ],
      itemWidth: 15,
      itemHeight: 15,
      itemGap: 30,
      selectedMode: true, //选择
      textStyle: {
        color: '#F1F2FF',
      },
    },
    xAxis: [
      {
        type: 'category',
        data: data.x,
        axisPointer: {
          type: 'shadow',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          color: '#F1F2FF',
          fontSize: 15,
          fontWeight: 500,
        },
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: data.unit,
        nameTextStyle: {
          color: '#F1F2FF',
          fontSize: '16',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          color: '#F1F2FF',
          fontSize: 15,
          fontWeight: 500,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
          },
        },
      },
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
      },
    ],
    series: [
      {
        name: '交通指数',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        lineStyle: {
          color: '#50CCFF',
        },
        itemStyle: {
          color: '#50CCFF',
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(80,204,255,0.3)',
              },
              {
                offset: 1,
                color: 'rgba(80,204,255,0)',
              },
            ],
            false
          ),
          shadowColor: 'rgba(0,179,244, 0.9)',
          shadowBlur: 20,
        },
        data: data.history,
      },
      {
        name: '预测指数',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        lineStyle: {
          type: 'dashed',
          color: '#F8AF0B',
        },
        itemStyle: {
          color: '#F8AF0B',
        },
        data: data.predict,
      },
      {
        name: '',
        type: 'effectScatter',
        symbolSize: [8, 8],
        rippleEffect: {
          period: 15,
          scale: 10,
          brushType: 'stroke',
        },
        tooltip: {
          show: false,
        },
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: '#FFF21A',
            },
            {
              offset: 1,
              color: '#FFF21A',
            },
          ]),
        },
        z: 12,
        data: data.point,
      },
    ],
  };
};

柱状图

柱状图一

const getOption = (data) => {
  return {
    grid: {
      x: 40,
      y: 62,
      x2: 28,
      y2: 40,
    },
    tooltip: {
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: 'rgba(213,212,212,0.5)',
        },
      },
      backgroundColor: 'rgba(0,6,46,0.80)',
      borderColor: 'rgba(37,192,255,0.70)',
      textStyle: {
        color: '#3EB5FF',
        fontSize: '18',
      },
    },
    legend: {
      right: '15%',
      top: '11%',
      data: [
        {
          name: '交通指数',
          itemStyle: {
            color: '#00FFFF',
          },
          icon:
            'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
        },
        {
          name: '预测指数',
          itemStyle: {
            color: '#FFD300',
          },
          icon:
            'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
        },
      ],
      itemWidth: 15,
      itemHeight: 15,
      itemGap: 30,
      selectedMode: false, //选择
      textStyle: {
        color: '#F1F2FF',
      },
    },
    xAxis: [
      {
        type: 'category',
        data: data.x,
        axisPointer: {
          type: 'shadow',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          color: '#F1F2FF',
          fontSize: 15,
          fontWeight: 500,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          color: '#F1F2FF',
          fontSize: 15,
          fontWeight: 500,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
          },
        },
      },
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
      },
    ],
    series: [
      {
        name: '交通指数',
        type: 'bar',
        barWidth: '7px',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#00FFFF', // 0% 处的颜色
              },
              {
                offset: 0.38,
                color: '#00D0FF', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(58,166,239,0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: data.history,
      },
      {
        name: '预测指数',
        type: 'bar',
        barWidth: '7px',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#FFD300', // 0% 处的颜色
              },
              {
                offset: 0.25,
                color: 'rgba(255, 189, 0, 0.7)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255,207,0,0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: data.predict,
      },
      {
        name: 'blue',
        type: 'pictorialBar',
        symbol:
          'image://data:image/png;base64,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',
        symbolSize: [25, 25],
        symbolOffset: [-4, -12],
        z: 12,
        tooltip: {
          show: false,
        },
        data: data.blue,
      },
      {
        name: 'yellow',
        type: 'pictorialBar',
        symbol:
          'image://data:image/png;base64,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',
        symbolSize: [25, 25],
        symbolOffset: [4, -12],
        z: 12,
        tooltip: {
          show: false,
        },
        data: data.yellow,
      },
    ],
  };
};

柱状图二

const getOption = (data) => {
  return {
    grid: {
      x: 60,
      y: 40,
      x2: 25,
      y2: 25,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: 'rgba(213,212,212,0.5)',
        },
      },
      backgroundColor: 'rgba(0,6,46,0.80)',
      borderColor: 'rgba(37,192,255,0.70)',
      formatter: function (params) {
        let color = ['#01C5FF', '#FFF21A'];
        let str =
          '<span style="font-size: 18px;color:#3EB5FF">' +
          params[0].axisValue +
          '</span>' +
          '<br />';
        params.forEach((item, index) => {
          str +=
            '<span style="display:inline-block;margin-right:5px;font-size: 18px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
            color[index] +
            '"></span>' +
            '<span style="display:inline-block;margin: 0 0 0 5px;font-size: 18px;color:#3EB5FF;width: 80px">' +
            item.seriesName +
            ' : ' +
            '</span>' +
            '<span style="display:inline-block;margin-left:20px;font-size: 18px;color:#25FFE5">' +
            item.data +
            '</span>' +
            '<br />';
        });
        return str;
      },
    },
    legend: {
      right: '1.5%',
      top: '2%',
      data: [
        {
          name: '事件数量',
          itemStyle: {
            color: '#FFF21A',
          },
          icon:
            'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
        },
        {
          name: '上月同期',
          itemStyle: {
            color: '#01C5FF',
          },
          icon:
            'path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z',
        },
      ],
      itemWidth: 15,
      itemHeight: 15,
      itemGap: 30,
      selectedMode: false, //选择
      textStyle: {
        color: '#F1F2FF',
      },
    },
    xAxis: [
      {
        type: 'category',
        data: data.x,
        axisPointer: {
          type: 'shadow',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          color: '#F1F2FF',
          fontSize: 15,
          fontWeight: 500,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：个',
        nameTextStyle: {
          color: '#F1F2FF',
          fontSize: '16',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
        axisLabel: {
          show: true,
          color: '#F1F2FF',
          fontSize: 15,
          fontWeight: 500,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
          },
        },
      },
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(89,126,178,0.7)',
            width: 2,
          },
        },
      },
    ],
    series: [
      {
        name: '上月同期',
        type: 'bar',
        barWidth: '7',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#00EFFF', // 0% 处的颜色
              },
              {
                offset: 0.69,
                color: 'rgba(0, 225, 255, 0.61)', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(58,166,239,0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        data: data.lastMonth,
      },
      {
        name: '事件数量',
        type: 'line',
        itemStyle: {
          color: '#FFF21A',
          shadowColor: 'rgba(223, 223, 67, 0.3)',
          shadowBlur: 7.5,
        },
        lineStyle: {
          color: '#FFF21A',
        },
        data: data.today,
      },
      {
        name: '',
        type: 'effectScatter',
        symbolSize: [7, 7],
        rippleEffect: {
          period: 4,
          scale: 4,
          brushType: 'fill',
        },
        tooltip: {
          show: false,
        },
        itemStyle: {
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: '#FFF21A',
            },
            {
              offset: 1,
              color: '#1A1835',
            },
          ]),
        },
        data: data.today,
      },
    ],
  };
};

饼图

饼图一

const getOption = (list) => {
  return {
    title: [
      /*{
      text: list.total,
      top: '34%',
      textAlign: 'center',
      left: '47%',
      textStyle: {
        color: '#00FFB0',
        fontSize: 20,
        fontWeight: '500',
      },
    },*/
      {
        text: '人次',
        top: '51%',
        textAlign: 'center',
        left: '47%',
        textStyle: {
          color: '#FFFFFF',
          fontSize: 16,
          fontWeight: '500',
        },
      },
    ],
    series: [
      // 数据
      {
        //亮圆环
        type: 'pie',
        radius: ['65%', '71%'],
        center: ['50%', '50%'],
        data: [
          {
            value: 1,
            itemStyle: {
              color: 'rgba(0, 0, 0, 0)',
            },
            label: {
              show: false,
            },
          },
          {
            value: list.outProvince,
            itemStyle: {
              color: '#0BFBFD',
            },
            label: {
              show: false,
            },
          },
          {
            value: 1,
            itemStyle: {
              color: 'rgba(0, 0, 0, 0)',
            },
            label: {
              show: false,
            },
          },
          {
            hoverOffset: 1,
            value: list.inProvince,
            itemStyle: {
              color: '#FFB70F',
            },
            label: {
              show: false,
            },
            labelLine: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
            hoverAnimation: false,
          },
          {
            hoverOffset: 1,
            value: list.local,
            itemStyle: {
              color: '#0C97FE',
            },
            label: {
              show: false,
            },
            labelLine: {
              smooth: true,
              lineStyle: {
                width: 0,
              },
            },
            hoverAnimation: false,
          },
        ],
      },
      {
        // 内阴影
        type: 'pie',
        radius: ['50%', '65%'],
        center: ['50%', '50%'],
        data: [
          {
            value: 1,
            itemStyle: {
              color: 'rgba(0, 0, 0, 0)',
            },
            label: {
              show: false,
            },
          },
          {
            value: list.outProvince,
            itemStyle: {
              color: 'rgba(11,251,253,0.3)',
            },
            label: {
              show: false,
            },
          },
          {
            value: 1,
            itemStyle: {
              color: 'rgba(0, 0, 0, 0)',
            },
            label: {
              show: false,
            },
          },
          {
            hoverOffset: 1,
            value: list.inProvince,
            itemStyle: {
              color: 'rgba(255,183,15,0.3)',
            },
            label: {
              show: false,
            },
            labelLine: {
              smooth: true,
              length: 1,
              length2: 20,
            },
            hoverAnimation: false,
          },
          {
            hoverOffset: 1,
            value: list.local,
            itemStyle: {
              color: 'rgba(12,151,254,0.2)',
            },
            label: {
              show: false,
            },
            labelLine: {
              smooth: true,
              length: 1,
              length2: 20,
            },
            hoverAnimation: false,
          },
        ],
      },
      {
        name: '最外部进度条',
        type: 'gauge',
        radius: '80%',
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            color: [
              [
                0.85,
                new echarts.graphic.LinearGradient(0, 0.5, 1, 0, [
                  {
                    offset: 0,
                    color: 'rgba(145,207,255,0)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(145,207,255,0.2)',
                  },
                  {
                    offset: 1,
                    color: '#046F89',
                  },
                ]),
              ],
              [1, '#07204B'],
            ],
            width: 4,
          },
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        itemStyle: {
          show: false,
        },
        detail: {
          show: false,
        },
        title: {
          //标题
          show: false,
        },
        data: [
          {
            name: 'title',
            value: 4,
          },
        ],
        pointer: {
          show: false,
        },
        animationDuration: 4000,
      },
    ],
  };
};

饼图二

const getOption = (list) => {
  var data = list.woman;
  return {
    title: [
      {
        text: '人次',
        top: '50%',
        textAlign: 'center',
        left: '47%',
        textStyle: {
          color: '#FFFFFF',
          fontSize: 16,
          fontWeight: '500',
        },
      },
    ],
    series: [
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['68%', '80%'],
        emphasis: {
          scale: false,
        },
        startAngle: -180,
        clockwise: false,
        labelLine: {
          show: false,
        },
        data: [
          {
            name: '',
            value: data > 100 ? 100 : data,
            itemStyle: {
              color: '#05e28d',
            },
          },
        ],
      },
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['60%', '95%'],
        startAngle: -180,
        clockwise: false,
        labelLine: {
          show: false,
        },
        itemStyle: {
          color: 'rgba(0,0,0,0)',
        },
        emphasis: {
          scale: false,
          label: {
            borderColor: 'rgb(0, 2, 69)',
          },
        },
        data: [
          {
            name: '',
            value: data / 2,
          },
          {
            //画中间的图标
            name: '',
            value: 0,
            itemStyle: {
              color: '#fff',
            },
            label: {
              position: 'inside',
              formatter: function () {
                return '{a|女}';
              },
              rich: {
                a: {
                  color: '#fff',
                  fontSize: 16,
                  width: 25,
                  height: 25,
                  borderRadius: 21,
                  borderWidth: 4,
                  borderColor: 'rgb(0, 2, 69)',
                  fontWeight: 600,
                  backgroundColor: '#00CA34',
                },
              },
            },
          },
          {
            //画剩余的刻度圆环
            name: '',
            value: 100 - data / 2,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
            label: {
              show: false,
            },
          },
        ],
      },
      //男 半圆的线
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['65%', '85%'],
        emphasis: {
          scale: false,
        },
        startAngle: -180,
        clockwise: false,
        labelLine: {
          show: false,
        },
        data: [
          {
            name: '',
            value: data,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
          },
          {
            name: '',
            value: (100 - data) * 0.5,
            itemStyle: {
              color: '#00EAFF',
            },
          },
          {
            //画中间的图标
            name: '',
            value: 0,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
          },
          {
            //画剩余的刻度圆环
            name: '',
            value: 100 - data - (100 - data) * 0.5,
            itemStyle: {
              color: '#00EAFF',
            },
            label: {
              show: false,
            },
          },
        ],
      },
      //男 中心圆
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['78%', '85%'],
        emphasis: {
          scale: false,
        },
        startAngle: -180,
        clockwise: false,
        labelLine: {
          show: false,
        },
        z: 12,
        data: [
          {
            name: '',
            value: data,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
          },
          {
            name: '',
            value: (100 - data) * 0.5,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
          },
          {
            //画中间的图标
            name: '',
            value: 0,
            itemStyle: {
              color: '#fff',
            },
            label: {
              position: 'inside',
              fontWeight: 'normal',
              formatter: function () {
                return '{a|男}';
              },
              rich: {
                a: {
                  color: '#fff',
                  fontSize: 14,
                  width: 25,
                  height: 25,
                  borderRadius: 21,
                  fontWeight: 100,
                  borderWidth: 4,
                  borderColor: 'rgb(0 2 69)',
                  fontFamily: 'Microsoft YaHei',
                  // lineHeight:100,
                  backgroundColor: '#009EFF',
                },
              },
            },
          },
          {
            //画剩余的刻度圆环
            name: '',
            value: 100 - data - (100 - data) * 0.5,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
            label: {
              show: false,
            },
          },
        ],
      },
      //最外层
       {
         type: 'pie',
         clockwise: false,
         radius: ['89%', '92%'],
         emphasis: {
           scale: false,
         },
         silent: true,
         center: ['50%', '50%'],

         labelLine: { show: false },

         data: [
           {
             value: 1,
             itemStyle: {
               color: 'rgba(19,159,190,0.7)',
               shadowColor: 'rgba(19,159,190,0.7)',
               borderWidth: 2,
               borderColor: 'rgba(19,159,190,0.7)',
               shadowBlur: 5,
               borderRadius: 10,
             },
           },
           {
             value: 44,
             itemStyle: {
               color: 'rgba(19,159,190,0.3)',
             },
           },
           {
             value: 1,
             itemStyle: {
               color: 'rgba(19,159,190,0.7)',
               shadowColor: 'rgba(19,159,190,0.7)',
               borderWidth: 2,
               borderColor: 'rgba(19,159,190,0.7)',
               shadowBlur: 5,
               borderRadius: 10,
             },
           },
           {
             value: 44,
             itemStyle: {
               color: 'rgba(19,159,190,0.3)',
             },
           },
           {
             value: 1,
             itemStyle: {
               color: 'rgba(19,159,190,0.7)',
               shadowColor: 'rgba(19,159,190,0.7)',
               borderWidth: 2,
               borderColor: 'rgba(19,159,190,0.7)',
               shadowBlur: 5,
               borderRadius: 10,
             },
           },
           {
             value: 44,
             itemStyle: {
               color: 'rgba(19,159,190,0.3)',
             },
           },
           {
             value: 1,
             itemStyle: {
               color: 'rgba(19,159,190,0.7)',
               shadowColor: 'rgba(19,159,190,0.7)',
               borderWidth: 2,
               borderColor: 'rgba(19,159,190,0.7)',
               shadowBlur: 5,
               borderRadius: 10,
             },
           },
           {
             value: 44,
             itemStyle: {
               color: 'rgba(19,159,190,0.3)',
             },
           },
         ],
       },
    ],
  };
};

饼图三

const getOption = (data) => {
  return {
    title: [
      {
        text: '人次',
        top: '51%',
        textAlign: 'center',
        left: '47%',
        textStyle: {
          color: '#FFFFFF',
          fontSize: 16,
          fontWeight: '500',
        },
      },
    ],
    series: [
      {
        name: '半径模式',
        type: 'pie',
        radius: ['45%', '80%'],
        center: ['50%', '50%'],
        roseType: 'radius',
        label: {
          show: false,
        },
        labelLine: {
          length: 1,
          length2: 20,
          smooth: true,
        },
        data: [
          {
            value: data.low,
            name: 'social',
            itemStyle: {
              color: '#03FFFF',
              borderWidth: 3,
            },
          },
          {
            value: data.middle,
            name: 'shopping',
            itemStyle: {
              color: '#00FFA4',
              borderWidth: 3,
            },
          },
          {
            value: data.high,
            name: 'reading',
            itemStyle: {
              color: '#0097FF',
              borderWidth: 3,
            },
          },
        ],
      },
    ],
  };
};

其他

树状

const getOption = (data) => {
  return {
    grid: {
      left: '5%',
      right: '5%',
      bottom: '0',
      top: '20%',
      containLabel: true,
    },
    xAxis: {
      data: data.xdata,
      triggerEvent: true,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        rotate: -30,
        color: '#F1F2FF',
      },
    },
    yAxis: {
      name: '',
      nameTextStyle: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: 'hill',
        barMinHeight: 10,
        type: 'pictorialBar',
        barCategoryGap: '-80%',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
          //color: 'rgba(98,114,255,0.8)',
          color: function (params) {
            let colorList = [
              'rgba(98,114,255,0.6)',
              'rgba(98,114,255,0.8)',
              'rgba(98,114,255,0.6)',
              'rgba(98,114,255,0.8)',
              'rgba(98,114,255,0.6)',
            ];
            return colorList[params.dataIndex];
          },
        },
        label: {
          formatter: '{@score}%',
          show: true,
          position: 'top',
          color: '#00FFB0',
          fontSize: 20,
        },
        data: data.data,
      },
    ],
  };
};

水球

此处注意echart5.0以上版本需额外引入 import ‘echarts-liquidfill’;

const getOption = () => {
  return {
    series: [
      {
        type: 'liquidFill',
        name: '',
        radius: '85%',
        center: ['50%', '45%'],
        data: [0.55, 0.5, 0.5],
        color: ['rgba(0,118,255,0.5)', 'rgba(0,102,255,0.5)', 'rgba(0,185,255,0.6)'],
        outline: {
          show: false,
        },
        backgroundStyle: {
          color: 'transparent',
          borderColor: 'transparent',
          borderWidth: 1,
          shadowColor: 'transparent',
          shadowBlur: 0,
        },
        label: {
          show: false,
        },
      },
    ],
  };
};