vue如何引入echarts(vue+webpack4.0+iview2.14+vuex+es6+stylus架构三)
第一步:引入echart依赖cnpm i echarts --save第二步:使用ecahrtsrc/main.jsimport echarts from 'echarts'Vue.prototype.$echarts=echarts解释: 在main.js中引入echarts, 然后赋值到Vue的原型上面,在页面就可以使用this.$echarts获取到了第三步:实例效果和代码&l
·
第一步:引入echart依赖
cnpm i echarts --save
第二步:使用ecahrt
src/main.js
import echarts from 'echarts'
Vue.prototype.$echarts=echarts
解释:
在main.js中引入echarts, 然后赋值到Vue的原型上面,在页面就可以使用this.$echarts获取到了
第三步:实例效果和代码
<template>
<div class="content-box">
<!-- vue的ref可以通过this.$refs.获取到DOM节点 -->
<!-- echart容器div必须设置高度,否则不显示 -->
<div ref="echart" style="height:300px;"></div>
</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(() => {
this.initEchart();
});
},
methods:{
initEchart(){
//获取DOM节点并初始化
let chart = this.$echarts.init(this.$refs.echart);
//编写echart参数
let option = {
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[220, 182, 191, 234, 290, 330, 310]
},
]
};
//设置图表的参数
chart.setOption(option);
}
}
}
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)