echarts 是开源的一个数据可视化的一个重要工具，运行流畅，并且是免费使用！下面是我在 vue-cli 中使用的一些方式
直接引入
首先 npm install echarts --save
然后再 main.js 中全局引入
import Mycharts from ‘../../sss’
Vue.use(myCharts)
** 但建议再引用时按需引入。但方便学习没有使用 **
/**
- 各种画 echarts 图表的方法都封装在这里
- 注意：这里 echarts 没有采用按需引入的方式，只是为了方便学习
*/
myCharts.js
需要先给 echarts 提供盒子的大小
import echarts from 'echarts'
const install = function(Vue) {
Object.defineProperties(Vue.prototype, {
$chart: {get() {
return {
// 画一条简单的线
line1: function (id) {this.chart = echarts.init(document.getElementById(id));
this.chart.clear();
const optionData = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {type: 'value'},
series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
this.chart.setOption(optionData);
},
}
}
}
})
export default {install}
使用时：
<template>
<div class="hello">
<div id="chart1"></div>// 指定盒子的宽高。</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {return {}
},
mounted() {this.$chart.line1('chart1');
}
}
</script>
<style scoped>
#chart1 {
width: 300px;
height: 300px;
}
</style>当然这只是最简单的使用。需要一点点的积累。关键在于细心参考官方文档。echarts 配置项