vue引入echarts：bar柱状图-pie饼图-radar雷达图-scatter散点图（相关配置实例）

乖乖我左边的房子在动

已于 2023-06-11 19:49:25 修改

阅读量1.4k

点赞数 5

分类专栏：前端文章标签： echarts vue.js javascript

于 2023-05-18 16:04:05 首次发布

本文链接：https://blog.youkuaiyun.com/Gong_01/article/details/130746248

版权

前端专栏收录该内容

6 篇文章

订阅专栏

文章目录

bar 柱状图
pie 饼图
radar雷达图
scatter散点图

bar 柱状图

最终效果如图：
在这里插入图片描述

代码展示：

option = {
  color: ['#E786D7', '#7F7FD5'], // 修改柱状图的颜色
  legend: {}, // 图例组件，用来显示Designer和User的图例
  dataset: { // 数据集组件，可对数据进行单独管理，可参考官网：https://echarts.apache.org/zh/option.html#dataset
          source: [ // 原始数据
            ['role', 'Designer', 'User'], // 表示维度名
            ['造型样式', 65, 43],
            ['材质', 67, 98],
            ['色彩', 75, 68],
            ['表带', 86, 98],
            ['表盘', 93, 43],
            ['整体感觉', 76, 76],
            ['综合评分', 87, 68]
          ]
        },
  xAxis: { // x轴
    type: 'category',
  },
  yAxis: {}, // y轴
  series: [ // 表示这是柱状图
    { type: 'bar' }, { type: 'bar' } // 有两个柱状图
  ]
};

最终效果如图：
在这里插入图片描述
代码展示：

option = {
  // title: {
  //   text: '标题'
  // },
  // tooltip: { // 提示框
  //   trigger: 'axis',
  //   axisPointer: {
  //     type: 'shadow'
  //   }
  // },
  // legend: {}, // 图例
  grid: {
    width: 200,
    height: 100
  },
  xAxis: {
    type: 'value',
    min: 0,
    max: 150,
    splitNumber: 5,
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#117B8E',
        opacity: 0.4,
      }
    },
  },
  yAxis: {
    type: 'category',
    axisTick: {
      show: false
    },
    data: ['1', '2', '3', '4'],
  },
  series: [
    {
      type: 'bar',
      data: [93, 37, 53, 95],
      barWidth: 15, // 设置柱状图的宽度
      itemStyle: {
          // color: '#117B8E', // 设置柱状图的颜色
          // opacity: 0.4
          normal: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0, // 从左往右
                  [
                      {offset: 0, color: '#00c0ff'},
                      {offset: 1, color: '#00c0ff'}
                  ]
              ),
              opacity: 0.6 // 设置渐变色的透明度
          }
      },
      label: { // 文本标签 添加横线
          show: true,
          position: 'right', // 或者 'insideRight'
          color: '#23fffc',
          fontWeight: 900,
          formatter: '▉    {c}',
          offset: [-10,1]
      }
    },
  ],
  // 使用graphic组件在柱子末尾添加横线
  // graphic: [
  //     {
  //       z: 10,
  //         type: 'line',
  //         shape: {
  //             x1: 205, y1: 140,
  //             x2: 205, y2: 155
  //         },
  //         style: {
  //             stroke: '#23fffc',
  //             lineWidth: 2
  //         }
  //     },
  //     {
  //       z: 10,
  //         type: 'line',
  //         shape: {
  //             x1: 209, y1: 65,
  //             x2: 209, y2: 80
  //         },
  //         style: {
  //             stroke: '#23fffc',
  //             lineWidth: 2
  //         }
  //     },
  // ]
};

最终效果如图：
在这里插入图片描述

代码展示：

option = {
  dataset: { 
          source: [ 
            ['周一', 35],
            ['周二', 57],
            ['周三', 75],
            ['周四', 56],
            ['周五', 63],
            ['周六', 76],
            ['周日', 47]
          ]
        },
  xAxis: { 
    type: 'category',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    show: false,
    splitLine: { 
      show: false
    },
    max: 100
  },
  series: [
    { 
      type: 'bar' ,
      itemStyle: {
          barBorderRadius: 27,
          color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: 'rgba(130, 63, 215, 0.89)'},
                  {offset: 1, color: 'rgba(100, 36, 234, 1)'}
              ]
          )
      },
      barWidth: '50%'
    }
  ]
};

最终效果如图：
在这里插入图片描述 代码展示：

      // 这里按顺序修改文字
      let xData = ['10% 集团XX', '10% XX公司', '10% 制水公司', '10% 供水公司','10% 排水公司', '10% 污水公司', '10% XX公司', '10% 水中心','10% 水务建设','10% 业务受理','10% 水务发展']
      // 这里按顺序修改长度
      let yData = ['70', '75', '76', '90', '95', '70', '75', '76', '90', '95', '90']
      // 这里按顺序修改颜色
      let colorList = ['red', '#75f5ff', '#00deff', '#0093ff', '#2a5fcf', 'green', '#75f5ff', '#00deff', '#0093ff', '#2a5fcf', 'blue']
      var option = {
        angleAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          clockwise: true // 设置顺时针
        },
        radiusAxis: {
          type: 'category',
          data: xData,
          z: 100,
          axisLine: {
            // show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // show: false
            interval: '0', // 调整刻度显示
            // textStyle: {
            //   fontSize: 20, // 设置文字大小
            //   color: 'red' // 设置文字颜色
            // }
          },
          splitLine: {
            show: false
          }
        },
        polar: {
          radius: [50 ,'90%']
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params, ticket, callback) {
            return params.name + ' : ' + ' (' + params.data + '%)'
          }
        },
        series: [
          {
          type: 'bar',
          barWidth: '30%', // 设置柱子宽度为类别间距的百分比值
          data: yData,
          coordinateSystem: 'polar',
          itemStyle: {
            normal: { // 颜色显示
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          },
          showBackground: true, // 显示柱子背景
          },
          {
            type: 'scatter',
            data: yData,
            coordinateSystem: 'polar',
            name: 'A',
            stack: 'a',
            emphasis: {
              focus: 'series'
            },
            symbolSize: '15',
            itemStyle: {
              color: function (params) {
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      }

pie 饼图

最终效果如图：
在这里插入图片描述
注: 这个效果由中间白色的饼图和外围的环形图构成
代码展示：

option = {
  series: [
    {
      name: '中间圆形',
      type: 'pie', // 表示这是一个饼图
      radius: ['0', '50%'], // 分别表示这个圆形的内半径和外半径
      center: ['50%', '50%'], // 表示这个圆形的圆心所在位置
      label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息
              show: false // 不进行标签显示
            },
      data: [ // 表示数据内容
        {
          value: 1, // 数据值
          itemStyle: { // 定义图形样式
            color: '#FFFFFF' // 该中间圆形的颜色为白色
          },
          tooltip: { // 鼠标移入的提示框设置
            show: false // 不显示提示
          }
        }
      ]
    },
    {
        name: '环形',
        type: 'pie',
        radius: ['50%', '70%'], // 分别表示这个环形的内半径和外半径
        labelLine: {
          show: false // 不显示视觉引导线
        },
        itemStyle: { // 颜色渐变设置
          normal: {
            color: (list) => {
              var colorList = [ 
                {
                  colorStart: '#7F7FD5', //数据占有的部分开始颜色
                  colorEnd: '#C9A1DE' // 结束颜色
                },
                {
                  colorStart: '#ECE8F3',
                  colorEnd: '#ECE8F3'
                }
              ]
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ // 左、下、右、上
                offset: 0,
                color: colorList[list.dataIndex].colorStart
              }, {
                offset: 1,
                color: colorList[list.dataIndex].colorEnd
              }])
            }
          }
        },
        data: [
          { value: 20}, // 数据占有的部分
          { value: 80 } // 剩余部分
        ]
      }
  ]
};

radar雷达图

最终效果如图：
在这里插入图片描述
代码展示：

option = {
    legend: { // 图例
      data: ['User', 'Designer'],
      left: 0, // 图例被放置的位置
      top: 90,
      orient: 'vertical' // 图例列表的布局朝向，竖向表示，横向为：'horizontal'
    },
    radar: {
      indicator: [ // 雷达图的指示器
        { name: '造型样式', max: 6 }, // 包含名字和最大值
        { name: '材质', max: 6 },
        { name: '色彩', max: 6 },
        { name: '表带', max: 6 },
        { name: '表盘', max: 6 },
        { name: '整体感觉', max: 6 }
      ],
      splitArea: { // 不显示分隔区域
        show: false
      },
      axisName: { // 指示器名字
        color: '#474747', // 设置颜色
        fontSize: 10 // 设置字体大小
      },
      nameGap: 5, // 设置指示器名称和指示器轴的距离
      radius: '65%', // 设置指示器外半径和内半径的大小，也就是设置这个指示器的大小
      axisLine: { // 设置坐标轴轴线，就是从中心向外的线段
        lineStyle: {
          color: 'rgba(176,176,176,0.7)' // 设置坐标轴线线的颜色
        }
      },
      splitLine: { // 设置坐标轴在grid区域中的分隔线，就是一圈一圈向外扩大的线段
        lineStyle: {
          color: 'rgba(176,176,176,0.7)' // 设置颜色
        }
      }
    },
    series: [
      {
        type: 'radar', // 表示该图为雷达图
        color: ['#7F7FD5', 'rgba(231,134,215,0.6)'], // 设置该雷达图不同对象的颜色
        data: [ // 设置该雷达图不同对象的数据列表
          {
            value: [
              4,
              4,
              5,
              5,
              4,
              5
            ],
            name: 'User' // 设置该数据列表所表示的对象
          },
          {
            value: [
              5,
              5,
              4,
              5,
              4,
              4
            ],
            name: 'Designer'
          }
        ],
        areaStyle: { // 设置区域填充样式，即各种数据连起来的整片区域
          opacity: 0.5 // 设置其透明度
        }
      }
    ]
};

scatter散点图

最终效果如图：
在这里插入图片描述
代码展示：

option = {
    xAxis: { // 设置直角坐标系grid中的 x 轴
          splitLine: { // 删除xAxis的分隔线
            show: false
          },
          minorTick: { // 删除xAxis的次刻度线
            show: false
          },
          minorSplitLine: { // 删除xAxis的次分隔线
            show: false
          },
          axisLine: { // 设置坐标轴轴线
            lineStyle: {
              type: 'dashed', // 设置坐标轴轴线类型为点状
              color: '#C5CAD1' // 设置坐标轴轴线颜色
            }
          },
          axisTick: { // 不显示坐标轴刻度
            show: false
          },
          axisLabel: { // 设置坐标轴刻度标签
            color: '#3B3B4D' // 设置坐标轴刻度标签的颜色
          },
          min: 0, // 设置坐标轴刻度最小值
          max: 0.3 // 设置坐标轴刻度最大值
        },
        yAxis: { // 设置直角坐标系grid中的y轴，其他配置选项与x轴相似
          splitLine: { 
            show: false
          },
          minorTick: { 
            show: false
          },
          minorSplitLine: { 
            show: false
          },
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#C5CAD1'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#3B3B4D'
          },
          min: 0,
          max: 100
        },
        series: [
          {
            type: 'scatter', // 表示该图为散点图
            colorBy: 'data', // 设置数据项颜色，使每个数据项都有不同的颜色
            // itemStyle: {
            //   color: function (params) {
            //     // 根据数据项所在象限设置不同颜色
            //     if (params.data[0] > 0 && params.data[1] > 0) {
            //       return '#9AEE9B'
            //     } else if (params.data[0] < 0 && params.data[1] > 0) {
            //       return '#E786D8'
            //     } else if (params.data[0] < 0 && params.data[1] < 0) {
            //       return '#9E9E9E'
            //     } else {
            //       return '#7F7FD5'
            //     }
            //   }
            // },
            symbol: 'roundRect', // 设置数据项标记的形状
            symbolSize: [18, 6], // 设置数据项标记的形状大小
            data: [ // 设置数据，第三个数据项为数据标记后的文本标签，在下方的函数中进行设置
              [0.265, 89, '造型样式'],
              [0.103, 67, '材质'],
              [0.039, 95, '色彩'],
              [0.137, 80, '表带'],
              [0.163, 77, '表盘'],
              [0.169, 90, '整体感觉']
            ],
            label: { // 设置图形上的文本标签
              show: true, // 显示图形上的文本标签
              position: 'right', // 设置图形上文本标签的位置
              fontSize: 10, // 设置图形上文本标签的字体大小
              color: '#474747', // 设置图形上文本标签的字体颜色
              formatter: function (params) { // 标签内容格式化函数，将其设置为数据data里面的第三个数据项
                return params.value[2]
              }
            }
          }
        ]
};