在vue中使用echarts

淩亂°似流年 2023-10-10 08:23 79阅读 0赞

#### 1.安装依赖： ####

npm install echarts -S

#### 2.在.vue文件中引入： ####

var echarts = require("echarts");

#### 3.开始使用，先创建一个简单的折线图，效果如下： ####

![1629560-20190729164024974-2111036668.png][]

贴上代码：

在右侧添加工具栏：

toolbox: {
            show: true, //是否显示工具栏组件
            orient: "vertical", //工具栏icon的布局朝向
            itemSize: 18, //工具栏icon的大小
            itemGap: 20, //item之间的间距
            right: 20, //toolbox的定位位置
            feature: {
              saveAsImage: { show: true }, //导出图片
              dataView: { show: true }, //数据视图
              magicType: {
                //动态类型切换
                type: ["line", "bar"]
              },
              dataZoom: { show: true }, //数据区域缩放
              restore: { show: true } //重置
            }
          },

给图标添加平均值和最大最小值，最后的代码是这样的：

<template>
      <div class="head">
        <div id="echartContainer"></div>
      </div>
    </template>
    
    <script>
    var echarts = require("echarts");
    export default {
      data() {
        return {};
      },
      mounted() {
        //基于准备好的dom, 初始化echarts实例
        let myChart = echarts.init(document.getElementById("echartContainer"));
        myChart.setOption({
          title: {
            show: true, //显示折线图
            text: "简单折线图", //标题文字
            subtext: "单位", //副标题
            left: 50, //配置title的位置
            padding: [5, 20, 5, 10] //title的padding值
          },
          toolbox: {
            show: true, //是否显示工具栏组件
            orient: "vertical", //工具栏icon的布局朝向
            itemSize: 18, //工具栏icon的大小
            itemGap: 20, //item之间的间距
            right: 20, //toolbox的定位位置
            feature: {
              saveAsImage: { show: true }, //导出图片
              dataView: { show: true }, //数据视图
              magicType: {
                //动态类型切换
                type: ["line", "bar"]
              },
              dataZoom: { show: true }, //数据区域缩放
              restore: { show: true } //重置
            }
          },
          tooltip: {
            trigger: "axis" //通过哪种方式触发tip
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            name: "产品"
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "line",
              data: [10, 20, 36, 10, 10, 20],
              itemStyle: {
                normal: {
                  color: "hotpink"
                }
              },
              markPoint: {
                data: [
                  { type: "max", name: "最大值" },
                  { type: "min", name: "最小值" }
                ]
              },
              markLine: {
                data: [
                  { type: "average", name: "平均值" }
                ]
              }
            }
          ]
        });
      }
    };
    </script>

效果是这样的：

![1629560-20190729164932491-2096537708.png][]

#### 4.按需引入，全局引入所有的echarts图表打包，导致体积过大。 ####

在vue文件中引入：

let echarts = require('echarts/lib/echarts')
    // 引入柱状图组件
    require('echarts/lib/chart/bar')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    export default {
      name: 'hello',
      data() {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      mounted() {
        this.drawLine();
      },
      methods: {
        drawLine() {
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('myChart'))
          // 绘制图表
          myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          });
        }
      }
    }

记录一下学习的东西。更多效果请看官网：https://echarts.baidu.com/option.html

转载于:https://www.cnblogs.com/0314dxj/p/11264874.html

[1629560-20190729164024974-2111036668.png]: https://img2018.cnblogs.com/blog/1629560/201907/1629560-20190729164024974-2111036668.png
[1629560-20190729164932491-2096537708.png]: https://img2018.cnblogs.com/blog/1629560/201907/1629560-20190729164932491-2096537708.png