vue2中echarts的使用

原创

已于 2024-08-19 11:40:34 修改 · 2.4k 阅读

标签

#echarts #前端 #javascript

于 2024-06-26 11:56:44 首次发布

官网：Apache ECharts

echarts使用步骤：

1.安装

npm install echarts --save

或

npm install echarts@4.9.0 --save // 带版本号

2. 方法(1) 在main.js中全局引入并注册

// import echarts from 'echarts'

import * as echarts from 'echarts'

Vue.prototype.$echarts=echarts

方法(2) 局部引用(页面script)

import * as echarts from 'echarts'

3. 创建容器（直接在template里面写上 div容器）

<div id="myChart" ref="myChart" style="width: 100%;height:480px;"></div>

4.配置表格数据（data中）

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

在官网复制修改数据即可

5.绘制图表（methods）

getChart(){
      // 在步骤2的方法1中 通过 this.$echarts.init方法初始化echarts实例并使用 setOption 方法注册图表配置项和数据
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption(this.option);
}

6.展示图表

需要讲“绘制图表代码的函数，挂载到mounted”

  mounted() {
    this.getChart();
  },

以上是方法。

示例：

【1】 echarts双y轴柱状图

效果：

代码：

<template>
    <div class="echarts-box">
      <div id="barChart" ref="barChart" :style="barStyle"></div>
    </div>
</template>
<script>
// import * as echarts from 'echarts' // 方法2 局部引用
export default {
 data () {
    return {
        barStyle: { height: '480px', with: '100%' }, // echarts宽高
        echartsData: [