5.1 Vue中引入Apache ECharts图表（Vue）

ibun.song

已于 2023-03-17 14:21:12 修改

阅读量788

点赞数 3

分类专栏： Vue 环境搭建文章标签： echarts vue.js apache

于 2023-03-17 11:58:15 首次发布

本文链接：https://blog.csdn.net/qq_40805441/article/details/129614400

版权

环境搭建同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

Vue

11 篇文章 4 订阅

订阅专栏

Vue中引入Apache Echarts图表

{
  "name": "xxx-project",
  "version": "0.1.0",
  "description": "A Vue.js project",
  "private": true,
  "author": "ibun.song",
  "scripts": {
  	"start": "npm run dev"
    "dev-serve": "vue-cli-service serve --mode local --port 8888",
   	......
  },
  "dependencies": {
   	......
    "axios": "^0.21.4",
   	......
    "echarts": "^4.9.0",
	......
    "vue": "^2.6.11",
    "vue-cli": "^2.9.6",
    "vue-router": "^3.2.0",
	......
  },
  "devDependencies": {
	......
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
	......
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

注解：

属性	解释说明
name	设置应用程序/软件包的名称
version	表明当前的版本
description	应用程序/软件包的简短描述
private	如果设置为 true，则可以防止应用程序/软件包被意外地发布到 npm
author	列出软件包的作者
scripts	定义一组可以运行的 node 脚本
dependencies	设置作为依赖安装的 npm 软件包的列表
echarts	Echart版本（常用echarts 4.x（以下简称 v4）到 echarts 5.x）
devDependencies	设置作为开发依赖安装的 npm 软件包的列表
browserslist	用于告知要支持哪些浏览器（及其版本）

2. NPM 安装 Echarts

①新建终端

在这里插入图片描述

打开项目根目录输入命令行

npm install echarts@4.9.0
或
npm install echarts --save
或
npm install --save

3. 在「main.js」文件中引入Apache Echarts

......
// 4.x版本引入方式
import echarts from 'echarts'
// 5.x版本引入方式
// import * as echarts from 'echarts'

Vue.prototype.$echarts = echarts;

......

详细参考官方文档： Apache Echarts #按需引入-echarts-图表和组件

三、绘制图表

1. 在「xxx.vue」文件中绘制图表

<template>
......

 <!-- 注：绘制Echarts图标时，需给定div id 属性 和div 固定的宽度和高度 -->
 <div id="eCharts_id_01" style="width: 1400px; height: 600px;"></div>

 <script>
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('eCharts_id_01'));
  
  // 指定图表的配置项和数据
  let option = {
   xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
   },
   yAxis: {},
   series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
   ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 监听图表容器的大小并改变图表大小
  window.addEventListener('resize', myChart.resize);

 </script>

......

</template>

2. 生成图表

在这里插入图片描述

四、图表配置项

1. 参考官方文档

Apache Echarts #配置项手册

2. 示例代码

create_user_trainning_info.vue

<template>
  <div id="eChart_id_001" class="eChart_class_001" style="width: 1400px; height: 600px;"></div>
</template>

<script>

export default {
  name: "Graph",

  data() {
    return {
      echarts_data: '',
      // X,Y轴的最大值
      max_x: 60,
      max_y: 1000,
      // X,Y轴基线设定值
      markarea_mid_x: 10,
      markarea_mid_y: 100,
      // 图标滚动条的开始终了位置
      scrollbar_start: 0,
      scrollbar_end: 40 / 60 * 100,
    };
  },

  mounted: async function () {
    await this.onload();
  },

  methods: {

    onload: async function () {
      this.drawBubbleEcharts('eChart_id_001');
    },

    drawBubbleEcharts(chart_div) {

      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(document.getElementById(chart_div));
      // 自定义图表初期数据
      this.echarts_data = {
        class_average_info: {
          average_age: 25,
          average_height: 160
        },
        //
        max_age: 44,
        max_height: 500,
        user_info: [
          { age: 36, height: 400, user_name: '用户_001', info_01: '走 15', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '哑铃 1522' },
          { age: 1, height: 6, user_name: '用户_002', info_01: '走 15', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '哑铃 3000' },
          { age: 5, height: 25, user_name: '用户_003', info_01: '走 25', info_02: '跑 18', info_03: '跳 15', info_04: '蹲 15', info_05: '哑铃 2' },
          { age: 13, height: 80, user_name: '用户_004', info_01: '走 40', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '哑铃 10' },
          { age: 10, height: 0, user_name: '用户_005', info_01: '走 20', info_02: '跑 0', info_03: '跳 0', info_04: '蹲 0' },
          { age: 34, height: 300, user_name: '用户_006', info_01: '走 40', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '哑铃 1999' },
          { age: 15, height: 90, user_name: '用户_007', info_01: '走 40', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '哑铃 185' },
          { age: 45, height: 280, user_name: '用户_008', info_01: '走 25', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '哑铃 500' },
          { age: 18, height: 150, user_name: '用户_009', info_01: '走 40', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '' },
          { age: 7, height: 80, user_name: '用户_010', info_01: '走 40', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '哑铃 1000' },
          { age: 17, height: 250, user_name: '用户_011', info_01: '走 40', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5' },
          { age: 44, height: 50, user_name: '用户_012', info_01: '走 40', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '哑铃 100' },
          { age: 26, height: 160, user_name: '用户_013', info_01: '走 40', info_02: '跑 10', info_03: '跳 5', info_04: '蹲 5', info_05: '哑铃 4441' },
        ]
      }

      console.log(this.echarts_data)

      let data_echarts = this.convertEchartsData(this.echarts_data.user_info);

      //APIデータをフォーマット
      this.max_x = this.get_y_max(this.echarts_data.max_age, 5);
      this.max_y = this.get_y_max(this.echarts_data.max_height, 100);
      this.markarea_mid_x = this.echarts_data.class_average_info.average_age;
      this.markarea_mid_y = this.echarts_data.class_average_info.average_height;

      let option = {
        title: {
          id: 'xxx', // 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
          show: true, // 是否显示标题组件。
          text: 'ECharts_散点图', // 主标题文本，支持使用 \n 换行。

        },
        color: '#041357', // 气泡颜色
        xAxis: {
          name: '用户年龄',
          type: 'value',
          interval: 5, // 步长
          min: 0, // 起始
          max: this.max_x, // 终止
          // data: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45],
          boundaryGap: false, //坐标轴两边留白策略, 默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
          axisTick: {
            length: 0, //坐标轴刻度的长度。
          },
        },
        yAxis: {
          name: '用户体重',
          type: 'value',
          interval: 20, // 步长
          min: 0, // 起始
          max: this.max_y, // 终止
          boundaryGap: false,
          axisTick: {
            length: 0, //坐标轴刻度的长度。
          },
        },
        tooltip: {
          show: true, // 是否显示提示框组件
          trigger: 'item',
          backgroundColor: 'rgb(255, 255, 255)',
          borderColor: 'grey',
          borderWidth: 1,
          textStyle: {
            color: 'black',
            fontSize: '14'
          },
          axisPointer: {
            type: 'shadow', // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
            label: {
              margin: 5,    // label 距离轴的距离
              color: 'black',     // 文字的颜色
              fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
              fontWeight: 'lighter',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
              fontSize: '18',    // 文字字体大小
              lineHeight: '50',    // 行高 
              padding: [5, 7, 5, 7],    // 内边距，单位px 
              // backgroundColor: '#000',    // 文本标签的背景颜色
            }
          },
          formatter: function (params) {
            if (params.value) {
              let result = params.value[2] + '<br/>' + '训练信息/内容';
              if (params.value[3]) {
                result = result + '<br/>' + params.value[3] + '分'
              }
              if (params.value[4]) {
                result = result + '<br/>' + params.value[4] + '分'
              }
              if (params.value[5]) {
                result = result + '<br/>' + params.value[5] + '分'
              }
              if (params.value[6]) {
                result = result + '<br/>' + params.value[6] + '分'
              }
              if (params.value[7]) {
                result = result + '<br/>' + params.value[7] + '组'
              }
              return result
            }
          },
        },

        dataZoom: [
          {
            type: "slider", // 在底部
            show: true, // 是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
            backgroundColor: '#E8E8E8', //组件的背景颜色。
            start: this.scrollbar_start, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
            end: this.scrollbar_end,// 数据窗口范围的结束百分比。范围是：0 ~ 100。
            bottom: 10, // 控制滚动条距离底部的位置;
            /**
            不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
            默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
            如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
            */
            showDetail: false,
            handleSize: 20,      //两边手柄尺寸
            zoomLock: true,
            xAxisIndex: [0],
            minValueSpan: 40,
            maxValueSpan: 40,
            fillerColor: 'grey',//选中范围的填充颜色。
            handleStyle: {
              color: '#E8E8E8'
            },
            dataBackground: {  // 滑动条数据背景设置
              areaStyle: {
                opacity: 0
              },
              lineStyle: {
                opacity: 0
              },
            },

          }
        ],
        series: [
          {
            type: 'scatter',
            // 气泡图数据源
            data: data_echarts,
            // symbolSize: 30,
            symbolSize: function (value) {
              return value[1] / (value[0]) * 5; // 散点图点的大小
            },
            markArea: {
              silent: false,
              data: [
                [ // 包含色块在x轴起止点的配置数组
                  {
                    "xAxis": 0,
                    "yAxis": 0,
                    "itemStyle": { // 色块配置
                      "color": '#FFEFD5',
                      "opacity": 0.56
                    }
                  },
                  {
                    "xAxis": this.markarea_mid_x,
                    "yAxis": this.markarea_mid_y
                  },
                ],
                [ // 包含色块在x轴起止点的配置数组
                  {
                    "xAxis": 0,
                    "yAxis": this.markarea_mid_y,
                    "itemStyle": { // 色块配置
                      "color": '#FFCCCC',
                      "opacity": 0.56
                    }
                  },
                  {
                    "xAxis": this.markarea_mid_x,
                    "yAxis": this.max_y
                  },
                ],
                [ // 包含色块在x轴起止点的配置数组
                  {
                    "xAxis": this.markarea_mid_x,
                    "yAxis": 0,
                    "itemStyle": { // 色块配置
                      "color": '#F0FFFF',
                      "opacity": 0.56
                    }
                  },
                  {
                    "xAxis": this.max_x,
                    "yAxis": this.markarea_mid_y
                  },
                ],
                [ // 包含色块在x轴起止点的配置数组
                  {
                    "xAxis": this.markarea_mid_x,
                    "yAxis": this.markarea_mid_y,
                    "itemStyle": { // 色块配置
                      "color": '#99CCFF',
                      "opacity": 0.56
                    }
                  },
                  {
                    "xAxis": this.max_x,
                    "yAxis": this.max_y
                  },
                ]
              ]

            },
            markLine: { // 基础线
              symbol: "none",
              silent: true,// 图形是否不响应和触发鼠标事件
              itemStyle: {
                normal: {
                  color: '#a0a0a0',
                  label: {
                    show: false
                  }
                }
              },
              lineStyle: {
                type: 'solid', // 标线的样式
                width: 2, // 线宽
              },
              data: [
                {
                  xAxis: this.markarea_mid_x,
                  silent: true,
                },
                {
                  yAxis: this.markarea_mid_y,
                  silent: true,
                }
              ]
            },
            animation: true, // 是否开启动画。
            label: {
              formatter: '{b}',
              position: 'top',
              show: true
            },
            emphasis: {
              // focus: 'self',
              itemStyle: {
                borderColor: 'red',
                borderWidth: 2
              },
              blurScope: 'coordinateSystem',
              label: {
                show: true
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      window.addEventListener('resize', myChart.resize);

    },

    get_y_max: function (max_typing, y_interval) {
      let result = max_typing;
      let tmp_num = max_typing % y_interval;
      if (tmp_num > 0) {
        result = result + (y_interval - tmp_num)
      }
      return result;
    },

    convertEchartsData: function (data) {
      let res = [];
      let res_index = []
      for (var i = 0; i < data.length; i++) {
        this.pushArrayData(res_index, data[i].age)
        this.pushArrayData(res_index, data[i].height)
        this.pushArrayData(res_index, data[i].user_name)
        this.pushArrayData(res_index, data[i].info_01)
        this.pushArrayData(res_index, data[i].info_02)
        this.pushArrayData(res_index, data[i].info_03)
        this.pushArrayData(res_index, data[i].info_04)
        this.pushArrayData(res_index, data[i].info_05)
        res.push({
          name: data[i].user_name,
          value: res_index
        });
        res_index = []
      }
      return res;
    },
    pushArrayData: function (array, item) {
      if (item) {
        array.push(item);
      }
    }
  },
};

</script>
<style scoped>
.eChart_class_001 {
  margin-top: 150px;
}
</style>