vue2_echarts安装使用_入门

前言

大家好，我是yma16，本文分享vue2_echarts安装使用_入门

vue2项目初始化
要初始化Vue2项目，请按照以下步骤：

1. 确保您已经安装了Node.js和npm。

2. 打开终端并导航到要创建项目的目录。

3. 运行以下命令来初始化项目：

npm init

在初始化期间，您将被要求提供项目名称、版本号、描述等信息。您可以使用默认设置或根据需要进行更改。

4. 运行以下命令来安装Vue和Vue CLI：

npm install vue vue-cli -g

5. 使用Vue CLI创建Vue项目：

vue init webpack <project-name>

这将在当前目录下创建一个名为的新项目。

6. 进入新创建的项目目录并安装依赖项：

cd <project-name>
npm install

7. 运行以下命令来启动本地开发服务器：

npm run dev

npm安装

在vue的项目中使用npm安装

$ npm install echarts --save

在main.js中导入echarts

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

常见错误

Initialize failed: invalid dom
dom没有初始化，echart的实例执行早了，可以先初始化dom然后在函数中调用echart实例。
例：使用echart制作一个柱状图
vue声明方法

methods: {
    echartfunc: function (o) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("echart2"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ECharts 柱状图测试",
        },
        tooltip: {},
        xAxis: {
          data: ["yma16","法外狂徒", "张三", "李四", "maletingda", "echart"],
        },
        yAxis: {},
        series: [
          {
            name: "体重",
            type: "bar",
            data: [45, 50, 48, 43, 60, 65],
          },
        ],
      });
    }
 }

vue的template模板中

<button @click="echartfunc">测试柱状图</button>
    <div
    id="echart2" style="width: 1920px; height: 600px; background-color: bisque" >
    </div>

效果

数据加载、更新

思考：数据加载通过setOption
更新：使用setTimeOut不断循环调用echart的setOption达到循环渲染的效果。
例：柱状图添加数据
函数声明

export default {
  name: "echart01",
  data() {
    return {
      data:{
          x:["yma16","法外狂徒", "张三", "李四", "maletingda", "echart"],
          y:[45, 50, 48, 43, 60, 65]
      },
      msg: "echart 柱状图测试",
      insert_x:'',//插入横坐标 数据 使用
      insert_y:''
    };
  },
  methods: {
      insert:function(){
          this.data.x.push(this.insert_x);
          this.data.y.push(this.insert_y);
          console.log(this.data)
          setTimeout(this.update,1000);//1s刷新一次
      },
      update:function(){
          setTimeout(this.echartfunc,1000);//1s刷新一次
      },
      echartfunc: function (o) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("echart2"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ECharts 柱状图测试",
        },
        tooltip: {},
        xAxis: {
          data: ["yma16","法外狂徒", "张三", "李四", "maletingda", "echart"],
        },
        yAxis: {},
        series: [
          {
            name: "体重",
            type: "bar",
            data: [45, 50, 48, 43, 60, 65],
          },
        ],
      });
    }
 }

效果

dataset管理数据

dataset支持单独的数据集声明，数据被多个组件复用，利于数据的输入
对比

• 旧版本数据声明，数据分散

option = {
    xAxis: {
        type: 'category',
        data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            name: '2015',
            data: [89.3, 92.1, 94.4, 85.4]
        },
        {
            type: 'bar',
            name: '2016',
            data: [95.8, 89.4, 91.2, 76.9]
        },
        {
            type: 'bar',
            name: '2017',
            data: [97.7, 83.1, 92.5, 78.1]
        }
    ]
}

• dataset，数据合并

    var option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        ]
    },
    xAxis: [
        {type: 'category', gridIndex: 0},
        {type: 'category', gridIndex: 1}
    ],
    yAxis: [
        {gridIndex: 0},
        {gridIndex: 1}
    ],
    grid: [
        {bottom: '55%'},
        {top: '55%'}
    ],
    series: [
        // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
}

对象数组格式

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中，
        // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
        // 如果不指定 dimensions，也可以通过指定 series.encode
        dimensions: ['product', '2015', '2016', '2017'],
        source: [
            {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

效果

结束

本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！