栏目分类
你的位置:BlueMove 中文站 > ViciCoin中文网 >
相信很多小伙伴对于echarts这个东西应该不会陌生,我在网上看到很多文章,那么他到底是怎么用的呢,却是五花八门,我现在就来总结一下我的方法。
如果使用npm全局安装,太麻烦,这里推荐使用官网(ECharts 在线构建)定制下载,这样会方便我们使用。
选择柱状图,折线图,饼图;这三样是平常较常用到的;
坐标系选择直角坐标系;
组件可以全选,也可以选择自己所需要的,在这里个人建议除了工具栏不选,其他都选上;下载后的文件为echarts.min.js,建议把他放在static内。
好了,来到下一步,我们需要在components内创建一个echarts.vue,把这段代码复制下来,放到echarts.vue内;
接下来就可以在所需要使用echarts的页面上,在script内引入该组件,并注册该组件,注册完后你需要复制以下代码
好了,你已经离成功不远了!!
接下来我们到页面上使用该组件,我们要设置他的id,把option内的配置也给他传过去,该图的宽高也在上面设置好,你会发现,这个时候多了一个柱状图出来
这就是一个简单的echarts柱状图使用 ,我也是走了很多弯路,看了许多的文章,觉得每个人的方法都不同,我只是把我认为好的方法放上来,希望对大家有所帮助。
最后附上一张效果图 (当然,这些颜色都是可改的,具体可以看文档或者来问一下我,我都非常乐意解答)
附:报错:this.echarts.setCanvasCreator is not a function 的解决办法
echarts.vue页面引起的 prors不能传递方法
将刚才定制的echarts.js文件引入进去
参数加this
也可以直接复制代码进去,注意修改echarts.js的路径
总结
到此这篇关于uniapp引用echarts的详细步骤的文章就介绍到这了,更多相关uniapp引用echarts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:vue实现echarts饼图/柱状图点击事件实例echarts柱状图坐标轴内容显示不全的两种解决办法echarts实现3d柱状图的2种方式举例echarts实现横向和纵向滚动条(使用dataZoom)ECharts柱状图过多添加滚动条的步骤(亲测可用)