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中这么写：

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

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入折线图组件
require('echarts/lib/chart/line')
// 引入提示框和title、图例组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
    name: 'Home',
    mounted() {
        this.drawLine()
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = 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>

 

2、全局引入方式如下：

　在main.js中

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

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

<template>
    // 图表容器，需要指定宽高
    <div id="myChart" class="charts-box" style="width: 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'：自定义系列