echarts图表

一、饼图

1、直观显示

配置项：

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            // 扇形的半径
            radius: '70%',
            // 扇形位置
            center: ['50%', '55%'],
            data: [
              {value: 222, name: '在线'},
              {value: 50, name: '离线'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                // 修改标签的位置
                position: 'inner', // 默认使用折线连接扇形
                // 修改标签的文字
                formatter: '{b} : {c}'
              }
            }
          }
        ],
        // 扇形颜色
        color: ['#03999F', '#C1883A']
      }

效果：

image.png

2、环形图

配置项：

      option = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          // 图例布局方向
          orient: 'horizontal',
          x: 'center',
          y: '80',
          data:['已处理','未处理'],
          // 修改图例文字颜色
          textStyle: {
            color:'#000'
          }
        },
        series: [
          {
            name:'故障数目',
            type:'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:[
              {value:2290, name:'已处理'},
              {value:1570, name:'未处理'}
            ]
          }
        ],
        color: ['#00FFF6', '#C1883A']
      }

效果：

image.png

二、柱状图

1、普通

配置项：

option = {
    // 直角坐标系内绘图网格
    grid: {
      // 左上角坐标
      x: 40,
      y: 20,
      // 右下角坐标
      x2: 20,
      y2: 20
    },
    xAxis: {
      type: 'category',
      data: ['苏州', '衢州', '杭州', '宁波', '台州', '滨州', '菏泽', '济南', '莱芜', '滕州', '德州', '淄博', '青岛', '烟台'],
      // 坐标轴刻度与标签对齐
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
      // 修改轴上的字体颜色
      axisLabel: {
        color: '#4C4D4D'
      }
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130, 270, 230, 530, 50, 10, 330, 430],
      type: 'bar'
    }],
    // 柱状图颜色
    color: ['#55B3A6']
}

效果：

image.png

2、横向柱状图

配置项：

  上方柱状图的xAxis和yAxis配置替换即可

效果：

image.png

三、折线图

1、渐变折线图
配置项：

  option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      // 左上角坐标
      x: 60,
      y: 50,
      // 右下角坐标
      x2: 20,
      y2: 30
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      // 坐标轴两边留白策略
      // boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // 坐标轴刻度与标签对齐
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '邮件营销',
        type: 'line',
        areaStyle: {normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            // 渐变
            [
               {offset: 0, color: 'red'},
               {offset: 1, color: '#ddd'}
             ]
          )
        }},
        data: [120, 132, 101, 134, 90, 230, 210]
      }
    ]
  }

效果：

image.png