UniApp微信小程序使用echarts图标教程(附源码)

在项目中直接使用echarts时，H5端是OK的，但微信小程序会报错，所以来看一下如何在微信小程序中使用echarts

1.打开链接，下载第一个

下载链接

注意看此时这个版本是5.3.3

2.官网在线定制，下载下来

注意与版本

等待下载

下载完成

这是下载好的文件

3.将echarts.min.js文件放到这个目录下面

4.下载这个插件导入在HBuilderX中的项目

echarts - DCloud 插件市场

5.引入

6.运行效果

主要是看微信小程序的运行结果

7.完整代码

<template><view style="height: 750rpx"><l-echart ref="chart"></l-echart></view>
</template><script>import * as echarts from '@/uni_modules/lime-echart/components/lime-echart/echarts.min'export default {data() {return {option: {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]}}},mounted() {this.$refs.chart.init(echarts, chart=> {chart.setOption(this.option);});}}
</script>

8.柱状图

<template><view style="height: 750rpx"><l-echart ref="chart"></l-echart></view>
</template><script>import * as echarts from '@/uni_modules/lime-echart/components/lime-echart/echarts.min'export default {data() {return {option: {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]}]}}},mounted() {this.$refs.chart.init(echarts, chart=> {chart.setOption(this.option);});}}
</script>

9.饼图

<template><view style="height: 750rpx"><l-echart ref="chart"></l-echart></view>
</template><script>import * as echarts from '@/uni_modules/lime-echart/components/lime-echart/echarts.min'export default {data() {return {}},mounted() {this.$refs.chart.init(echarts, chart=> {let option = {title: {text: 'novels',subtext: '随便写写啦',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left',},series: [{name: '666',type: 'pie',radius: '50%',data: [{value: 1000, name: '墨香铜臭'},{value: 666, name: '天官赐福'},{value: 555, name: '魔道祖师'},{value: 600, name: '渣反'},{value: 100, name: '老四'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}chart.setOption(option);});}}
</script>

其他的使用方法可以参考插件市场