Vue项目中使用Echarts

近期准备完成一个数据可视化报表的小项目，主要的技术栈为Vue+webpack+Element-ui+Echarts

在项目搭建过程中，安装echarts并使用时，出现了一些问题，于是对echarts使用进行了梳理和总结。

本文章将讲述全局引入和按需引入两种使用方法，结合官网开发手册及demo测试。请各位看官一起看看吧～

基本信息

1. echarts官网 https://echarts.apache.org/zh/index.html
   1. 关于配置项以及图表的选择可以查看官网
2. 项目版本对照表（待补充）

一、全局引入

1.npm下载

npm install echarts --save

2.全局引入 mian.js

// echarts-4.0
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 引入echarts-5.0
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在页面中使用

// 重点
// 1.div设置id/class/ref；设置画布width，height（css样式）
// 2.let chartDom = document.getElementById('lineDemo') 获取dom节点
// 2.let myChart = this.$echarts.init(chartDom) 初始化echarts实例
// 3.myChart.setOption(this.option) 写入echarts配置项 详情见官网配置文档

<template>
    <div class="container">
      <h1>{{ title }}</h1>
      <div class="echart" id="lineDemo" ref="chart"></div>
    </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      title: 'echarts-demo',
      option: {
        title: {
          text: '某站点用户访问来源',
          top: '5%',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '15%',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c}'
                },
                labelLine: {show: true}
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    let chartDom = document.getElementById('lineDemo')
    let myChart = this.$echarts.init(chartDom)
    myChart.clear()
    myChart.setOption(this.option)
  },
  methods: {},
  watch: {},
  created () {
  }
}
</script>

<style scoped>
.echart{
  width:360px;
  height:360px;
}
</style>

二、按需引入

1.npm下载

npm install echarts --save

2.按需引入 创建外部文件Echarts/echarts.js

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
import Vue from 'vue';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, LineChart, ScatterChart, PieChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,          
    DatasetComponent,
    TransformComponent,
    LegendComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LegendComponent,
    BarChart,
    PieChart,
    LineChart,
    ScatterChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
//绑定在原型链上
Vue.prototype.$echarts = echarts
//导出echarts
export default echarts

//注意：如不知道图表该引入那些组件，可通过报错来引入

3.在页面中使用

// 重点
// 1.div设置id/class/ref；设置画布width，height（css样式）
// 2.let chartDom = document.getElementById('lineDemo') 获取dom节点
// 2.let myChart = this.$echarts.init(chartDom) 初始化echarts实例
// 3.myChart.setOption(this.option) 写入echarts配置项 详情见官网配置文档

<template>
    <div class="container">
      <h1>{{ title }}</h1>
      <div class="echart" id="lineDemo" ref="chart"></div>
    </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      title: 'echarts-demo',
      option: {
        title: {
          text: '某站点用户访问来源',
          top: '5%',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '15%',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c}'
                },
                labelLine: {show: true}
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    let chartDom = document.getElementById('lineDemo')
    let myChart = this.$echarts.init(chartDom)
    myChart.clear()
    myChart.setOption(this.option)
  },
  methods: {},
  watch: {},
  created () {
  }
}
</script>

<style scoped>
.echart{
  width:360px;
  height:360px;
}
</style>