一、安装Examples
安装命令:
npm install echarts -S
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
1、在vue项目中引用在main.js 文件中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2、在组件中使用
例如:
<div id="myChart" :style="{width: '300px', height: '300px'}">
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
this.drawLine();
},
methods: {
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["湖人队","火箭队","热火队","勇士队","篮网队","快船队"]
},
yAxis: {},
series: [{
name: '总比分',
type: 'bar',
data: [50, 20, 36, 10, 10, 20]
}]
});
}
}
}
</script>
把想引用的代码写入事件就可以了,myChart.setOption()就是上面的这个位置
let myChart = this.$echarts.init(document.getElementById(‘myChart’))
这个是获取的html中的元素,并出初始化
最后在生命周期中调用就可以了
mounted()