<h2>第一步:肯定是把插件引入进去</h2>
npm install echarts -S
如果上面的引入报错,可以使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
<h2>第二步 : 可以全局引入,或者是按需引入</h2>
<h3>全局引入</h3>
<h4>在main.js里</h4>
// 引入echarts
import echarts from 'echarts'
//一般都要加个$加到vue的原型链上,方便引用
Vue.prototype.$echarts = echarts
<h4>新建一个chart.vue组件</h4>
<template>
<div>
<div id="chart" class="chart">
</div>
</div>
</template>
<script>
export default {
data(){
return{}
},
mounted(){
this.myChart =
this.$echarts.init(document.getElementById("chart"));
this.drawChart();
},
methods:{
drawChart(){
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
this.myChart.setOption(option);
window.onresize = function(){
this.myChart.resize()
}
}
}
}
</script>
上面是个柱状图的demo,缺点:全局引入会将所有的echarts图表打包,导致体积过大,如果echarts图用的比较少,可以考虑按需引入
<h3>按需引入</h3>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
//引入右上角下载图片等等一系列的toolbox的功能
require('echarts/lib/component/title/toolbox')
export default {
//里面代码同上
}
</script>
这里之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全。
图表适应屏幕
$(window).resize(function() {
chart.resize()
})