最近工作中需要用到echarts,由于项目是用的vue-cli开发的。在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echarts的简单演示,实现过程如下:用了两种实现方式
从“echarts”进口echarts
Vue.prototype。$ echarts=echarts
<>强创建图表
第一种创建方式
在一个.vue文件中引入多张图表
创建WelcomePage.vue
& lt; template>
& lt; div>
& lt; h2>第一种在vue中使用echart的方式& lt;/h2>
& lt; div类=巴急怼北?
& lt; div id=跋咛酢弊４? lt;/div>
& lt;/div>
& lt; div类=巴急怼北?
& lt; div id=" pieGraph "祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
之前
& lt; script>//引入基本模板,按需加载
让echarts=要求(“echarts/lib/echarts”);//引入柱状图
要求(echarts/lib/图表/条);//引入柱状图
要求(“echarts/lib/图表/派”);
要求(“echarts/lib/组件/工具提示”);
要求(echarts/lib/组件/标题);
出口默认{
名称:“WelcomePage”,
数据(){
返回{}
},
安装(){
this.drawBar ();
this.drawPie ();
},
方法:{
拉杆(){//基于dom,初始化echarts实例
让线条=echarts.init (. getelementbyid(“线条”));//绘制图表
barGraph.setOption ({
标题:{
文本:“全年产量趋势图”,
左:“中心”
},
提示:{
触发:“项”,
格式化程序:“{}& lt; br/祝辞{b}: {c}’
},
传说:{
左:“中心”,
数据:['本年”、“上年”),
底部:0
},
xAxis: {
类型:“类别”,
名称:“x”,
splitLine:{显示:假},
数据:['一月”、“二月”,“三月”、“四月”,“五月”、“六月”,“七月”、“八月”、“九月”,“十月”,“十一月”,“十二月”)
},
网格:{
左:“1%”,
右:“2%”,
底:“8%”,
containLabel:真
},
桠溪:{
类型:“类别”,
名称:' y ',
splitLine:{显示:真},
数据:[“10%”,“20%”,“30%”,“40%”,“50%”,“60%”,“70%”,“80%”,“90%”,“100%”)
},
系列:[
{
名称:“本年”,
类型:“行”,
数据:[0.8,0.98,0.96,0.27,0.81,0.47,0.74,0.23,i, 0.25, 0.36, 0.56)
},
{
名称:“上年”,
类型:“行”,
数据:[1,0.2,0.4,0.8,0.16,0.32,0.64,1.28,5.6,0.25,0.63,0.65,0.12)
},
]
})
},
drawPie () {
让pieGraph=echarts.init (. getelementbyid (' pieGraph '));
pieGraph.setOption ({
标题:{
文本:“某站点用户访问来源”,
潜台词:“纯属虚构”,
谢:“中心”
},
提示:{
触发:“项”,
格式化程序:“{}& lt; br/祝辞{b}: {c} ({d} %)”
},
传说:{
东方:“垂直”,
左:“离开”,
数据:['直接访问”,“邮件营销”,“联盟广告”,“视频广告”、“搜索引擎”)
},
系列:[
{
名称:“访问来源”,
类型:“派”,
半径:“55%”,
中心:“50%”,“60%”,
数据:[
{值:335年,名字:“直接访问"},
{值:310年,名字:“邮件营销"},
{值:234年,名字:“联盟广告"},
{值:135年,名字:“视频广告"},
{值:1548年,名字:“搜索引擎'}
),
itemStyle: {
重点:{
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor:“rgba (0, 0, 0, 0.5)
}
}
}
]
})
}
}
}
& lt;/script>
实现效果如下图:
第二种实现方式(以组件的形式)
创建父组件father.vue
& lt; div>
& lt; h2>{{味精}}& lt;/h2>
& lt; p>第二种方式:通过组件的方式进行页面渲染& lt;/p>
& lt; div类="容器"比;
& lt; bar-graph> & lt;/bar-graph>
& lt;/div>
& lt; div类="容器"比;
& lt; pie-graph> & lt;/pie-graph>
& lt;/div>
& lt;/div>
