在vue文件引入echarts_详解vue文件中使用echarts.js的两种方式

最近工作中需要用到echarts，由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts，但是不想使用vue中规定好的数据格式，于是就自己做了一个vue项目引用原生echarts的简单demo，实现过程如下：用了两种实现方式

准备工作

1、安装echarts依赖

控制台输入：npm install echarts --save

2、全局引入

main.js中引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

创建图表

第一种创建方式

在一个.vue文件中引入多张图表

创建WelcomePage.vue

第一种在vue中使用echart的方式

// 引入基本模板,按需加载

let echarts = require('echarts/lib/echarts');

// 引入柱状图

require('echarts/lib/chart/bar');

// 引入柱状图

require('echarts/lib/chart/pie');

require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

export default {

name: "WelcomePage",

data () {

return { }

},

mounted(){

this.drawBar();

this.drawPie();

},

methods:{

drawBar(){

// 基于dom，初始化echarts实例

let barGraph = echarts.init(document.getElementById('barGraph'));

// 绘制图表

barGraph.setOption({

title: {

text: '全年产量趋势图',

left: 'center'

},

tooltip: {

trigger: 'item',

formatter: '{a}
{b} : {c}'

},

legend: {

left: 'center',

data: ['本年', '上年'],

bottom:0

},

xAxis: {

type: 'category',

name: 'x',

splitLine: {show: false},

data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

},

grid: {

left: '1%',

right: '2%',

bottom: '8%',

containLabel: true

},

yAxis: {

type: 'category',

name: 'y',

splitLine: {show