VUE中使用Echarts图表

我这里使用的是官方的echarts，并没有使用vue-echarts，这里我使用的是折线图，根据需求需要什么类型的图表，就配置相应的图表选项就可以了，效果图如下：

echarts的配置语法可参考：https://www.runoob.com/echarts/echarts-setup.html

官方文档：https://echarts.apache.org/zh/option.html#title

安装echarts依赖：

npm install echarts -S
或者使用淘宝的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S

介绍两种使用方式：全局引入和按需引入；

1、按需引入方式如下：

在需要使用图表的页面如：home.vue中这么写：

 1 <template>
 2     // 指定图表容器，需要指定宽高，否则可能不显示
 3     <div id="myChart" class="charts-box" style=" 100%;height: 420px;" />
 4 </template>
 5 
 6 <script>
 7 // 引入基本模板
 8 const echarts = require('echarts/lib/echarts')
 9 // 引入折线图组件
10 require('echarts/lib/chart/line')
11 // 引入提示框和title、图例组件
12 require('echarts/lib/component/tooltip')
13 require('echarts/lib/component/title')
14 require('echarts/lib/component/legend')
15 export default {
16     name: 'Home',
17     mounted() {
18         this.drawLine()
19     },
20     drawLine() {
21       // 基于准备好的dom，初始化echarts实例
22       const myChart = echarts.init(document.getElementById('myChart'))
23       myChart.showLoading() // 开启 loading 效果
24       setTimeout(() => {
25         myChart.hideLoading() // 隐藏 loading 效果
26       }, 2000)
27       // 绘制图表
28       myChart.setOption({
29         title: { text: '浏览统计' }, // 为图表配置标题
30         tooltip: {}, // 配置提示信息
31         xAxis: {
32           type: 'category',
33           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '123', '456', '789', '111', '1231', '5555']
34         }, // 配置要在 X 轴显示的项
35         yAxis: {
36           type: 'value'
37         }, // 配置要在 Y 轴显示的项
38         legend: {
39           data: ['浏览量', '收藏量']
40         }, // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
41         series: [
42           {
43             name: '浏览量', // 系列名称
44             data: [820, 932, 901, 934, 1290, 1330, 1320, 1350, 1333, 2000, 100, 2500, 3333], // // 系列中的数据内容
45             type: 'line' // // 系列图表类型
46           },
47           {
48             name: '收藏量',
49             data: [1000, 800, 3000, 93, 129, 133, 130, 135, 133, 200, 1000, 250],
50             type: 'line'
51           }
52         ] // 系列列表
53       })
54     }
55 }
56 </script>

2、全局引入方式如下：

　在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在需要使用图表的页面如：home.vue中这么写：

<template>
    // 图表容器，需要指定宽高
    <div id="myChart" class="charts-box" style=" 100%;height: 420px;" />
</template>

<script>
export default {
    name: 'Home',
    mounted() {
        this.drawLine()
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.showLoading() // 开启 loading 效果
      setTimeout(() => {
        myChart.hideLoading() // 隐藏 loading 效果
      }, 2000)
      // 绘制图表
      myChart.setOption({
       title: { text: '浏览统计' }, // 为图表配置标题
        tooltip: {}, // 配置提示信息
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '123', '456', '789', '111', '1231', '5555']
        }, // 配置要在 X 轴显示的项
        yAxis: {
          type: 'value'
        }, // 配置要在 Y 轴显示的项
        legend: {
          data: ['浏览量', '收藏量']
        }, // 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
        series: [
          {
            name: '浏览量', // 系列名称
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1350, 1333, 2000, 100, 2500, 3333], // // 系列中的数据内容
            type: 'line' // // 系列图表类型
          },
          {
            name: '收藏量',
            data: [1000, 800, 3000, 93, 129, 133, 130, 135, 133, 200, 1000, 250],
            type: 'line'
          }
        ] // 系列列表
      })
    }
}
</script>

所有图标类型，每个系列通过 type 决定自己的图表类型：

type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列