原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666
需求：
Vue项目用到ECharts，需要配置,除了直接在index.html里面引入echarts文件外，还实践总结了如下两种npm配置方法，亲测有效，建议用方法二。
方法一，注册echarts到vue的原型对象中，指定某个div作为echarts的画布：
1，npm安装
npm install echarts --save
2，main.js增加设置
// 引入echarts
import echarts from 'echarts'
// 将echarts注册到Vue组件的原型对象中去
Vue.prototype.$echarts = echarts
3，组件内使用
（1）创建charts文件夹，文件夹内创建index.vue文件
（2）在router文件夹的index.js文件内引入第一步建立的vue文件，并为其设置访问路径
//引入图表组件
import chart from '@/page/charts/index'
{
//为图表组件设置访问路径
path: '/chart',
name: 'chart',
component: chart
}
（3）在charts文件夹，index.vue里面加入如下代码
<template>
<div class="line" id="line" :style="{width: '300px', height: '300px'}"></div>
</template>
<script>
export default{
mounted(){
// 调用方法绘制图表
this.drawLine();
},
methods:{
drawLine(){
// 为charts选定父容器并初始化charts画布
let myChart = this.$echarts.init(document.getElementById('line'));
// 为图表添加数据
myChart.setOption({
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'
}]
})
}
},
}
</script>
4，验证
npm run dev 跑起来项目，在地址栏路径后加入/chart访问
备注：此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址：https://github.com/tom-wong666/model.git
方法二，注册echarts画布为vue的一个自定义组件(或者称为控件/标签)：
1，npm安装
npm i vue-echarts --save
2，main.js增加设置，注意引入配置的方式，可以直接b配置引入所有配置，也可以单独引入需要的配置，比如案例中只演示了bar，就只引入了bar
// 引入ECharts
import ECharts from 'vue-echarts/components/ECharts'
// 注册ECharts为标签
Vue.component('chart', ECharts)
// a配置：按需引入echart图表配置，同下b配置
import '../node_modules/echarts/lib/chart/bar'
// import '../node_modules/echarts/lib/chart/line'
// import '../node_modules/echarts/lib/chart/pie'
// import '../node_modules/echarts/lib/chart/tooltip'
// b配置：直接引入所有echart配置,同上a配置
// require('echarts')
3，组件内使用
（1）创建charts文件夹，文件夹内创建index.vue文件
（2）在router文件夹的index.js文件内引入第一步建立的vue文件，并为其设置访问路径
//引入图表组件
import chart from '@/page/charts/index'
{
//为图表组件设置访问路径
path: '/chart',
name: 'chart',
component: chart
}
（3）在charts文件夹，index.vue里面加入如下代码
<template>
<div>
<!--chart标签就是画布元素，设置chart的宽和高可以改变画布大小-->
<!--options绑定的数据实际配置项，对应echarts实例中的option后面的对象-->
<chart :options='bar' :style="{width: '300px', height: '300px'}"></chart>
</div>
</template>
<script>
export default{
data(){
return {
bar:{
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
}
}
},
}
</script>
4，验证
npm run dev 跑起来项目，在地址栏路径后加入/chart访问
备注：此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址：https://github.com/tom-wong666/xiaoa.git
网友评论