1、通过npm获取echarts
npm install echarts --save
2、在vue项目中引入echarts
这里有两种方式，一种全局注入，
（1）在main.js 中添加下面两行代码
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
（2）新建vue组件，在组件中引入
import * as echarts from 'echarts'
3、然后在组件中使用
<template>
<div ref="echart"></div>
</template>
<script>
import * asecharts from 'echarts'
exportdefault{
data() {
return {
options : {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
]
},
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
methods:{
initChart(){
this.echart = echarts.init(this.$refs.echart)
this.echart.setOption(this.options)
},
}
}
</script>
今天多付出一份努力，是为了明天能有多一种选择。
