本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下
该示例使用脚手架搭建
<>强安装echarts依赖
npm安装echarts - s
或者使用国内的淘宝镜像:
安装
npm安装- g cnpm——注册表=https://registry.npm.taobao.org
使用
cnpm安装echarts - s
<>强创建图表
主要。js
//引入echarts
从“echarts”进口echarts
Vue.prototype。$ echarts=echarts
之前
你好。vue
& lt; div id=癿yChart”:在& lt;/div>
出口默认{
名称:“你好”,
数据(){
返回{
味精:“欢迎来到你的Vue。js应用”
｝
}，
安装(){
this.drawLine ();
}，
方法:{
画直线(){//基于准备好的dom,初始化echarts实例
让myChart=charts.init美元(. getelementbyid (myChart))//绘制图表
myChart.setOption ({
标题:{文本:“在Vue中使用echarts "},
提示:{},
xAxis: {
数据:["衬衫”、“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”)
}，
桠溪:{},
系列:[{
名称:“销量”,
类型:“酒吧”,
数据:[5,20岁,36岁,10日,10日,20)
})
}）;
｝
｝
｝
之前
注意:这里echarts初始化应在钩子函数安装()中,这个钩子函数是在el被新创建的vm。el替美元换,并挂载到实例上去之后调用
上面全局引入会将所有的echarts图表打包,导致体积过大,所以我觉得最好还是按需引入。
你好。vue
//引入基本模板
让echarts=要求(“echarts/lib/echarts”)//引入柱状图组件
要求(echarts/lib/图表/条)//引入提示框和标题组件
要求(echarts/lib/组件/提示)
要求(echarts/lib/组件/标题)
出口默认{
名称:“你好”,
数据(){
返回{
味精:“欢迎来到你的Vue。js应用”
｝
}，
安装(){
this.drawLine ();
}，
方法:{
画直线(){//基于准备好的dom,初始化echarts实例
让myChart=echarts.init (. getelementbyid (myChart))//绘制图表
myChart.setOption ({
标题:{文本:“ECharts入门示例"},
提示:{},
xAxis: {
数据:["衬衫”、“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”)
}，
桠溪:{},
系列:[{
名称:“销量”,
类型:“酒吧”,
数据:[5,20岁,36岁,10日,10日,20)
})
}）;
｝
｝
｝
之前
这里之所以使用需要而不是进口,是因为需要可以直接从node_modules中查找,而进口必须把路径写全。
<强>页面展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
