uniapp 中如何引入和使用echarts

uniapp 中如何引入和使用echarts,最好可以有源码参考

可以去uniapp插件市场查找封装好的组件

DCloud 插件市场 DCloud 插件市场

https://ext.dcloud.net.cn/search?q=echarts

信很多小伙伴对于echarts这个东西应该不会陌生，我在网上看到很多文章，那么他到底是怎么用的呢，却是五花八门，我现在就来总结一下我的方法。

如果使用npm全局安装，太麻烦，这里推荐使用官网(ECharts 在线构建)定制下载，这样会方便我们使用。

选择柱状图，折线图，饼图；这三样是平常较常用到的；

坐标系选择直角坐标系；

组件可以全选，也可以选择自己所需要的，在这里个人建议除了工具栏不选，其他都选上；下载后的文件为echarts.min.js，建议把他放在static内。

好了，来到下一步，我们需要在components内创建一个echarts.vue，把这段代码复制下来，放到echarts.vue内；

接下来就可以在所需要使用echarts的页面上，在script内引入该组件，并注册该组件，注册完后你需要复制以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
import echarts from '@/components/echarts.vue';
export default {
// 注册组件
components: {
echarts
},
data(){
return{
option:{}
}
},
methods:{
logstatrt() {
// console.log('初次调用');
this.option = {
notMerge: true,
backgroundColor": "#F8FAFF",
tooltip: {
trigger: 'axis',
showContent: this.showContent,
axisPointer: {
type: 'shadow',
label: {
show: true
},
},
},
toolbox: {
padding: [200, 0, 0, 0],
show: true,
feature: { //工具配置项
mark: {
show: true
},
dataView: { //数据视图工具，可以展现当前图表所用数据
show: true, //是否显示该工具
readOnly: false //是否不可编辑
},
magicType: {
show: true, //是否显示该工具
type: ['line', 'bar'] //启用的动态类型
},
restore: {
show: true //是否显示该工具
},
saveAsImage: {
show: true //是否显示该工具
}
}
},
calculable: false, //是否显示拖拽的手柄
// itemHeight: 0,
legend: { //图例组件
data: [{
name: '进入数',
}, {
name: '出去数'
}],
itemGap: 24,
padding: [16, 0, 0, 0],
// y: 'bottom',
itemHeight: 8, //高
itemWidth: 8, //宽
icon: 'circle' //设置为圆
},
grid: {
top: '15%',
left: '4%',
right: '4%',
bottom: '6%',
containLabel: true
},
xAxis: [{
show: true,
type: 'category', //坐标轴类型
// boundaryGap:false, //解决数据与线不对应问题
data: ['7.1', '7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10','7.11' ],
// offset:50,
//['7.1', '7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10','7.11', ], //this.xList, //obama_budget_2012.names
axisLabel: {
color: '#7F84B5',
fontWeight: 300,
interval: 0,
},
axisTick: {
show: false //刻度线
},
axisLine: {
show: false, //不显示坐标轴线
},
}, ],
yAxis: [{
show: true,
boundaryGap: false, //解决数据与线不对应问题
type: 'value',
// name: 'Budget (million USD)',
// data: this.yList,
minInterval: 1,
axisLabel: {
interval: 0,
},
splitLine: {
show: true,
lineStyle: { //背景网格线
type: 'dashed'
}
},
axisTick: {
show: false //刻度线
},
axisLine: {
show: false, //不显示坐标轴线
},
}],
dataZoom: [{
show: false,
start: 0,
end: 100,
handleSize: 8
},
{
type: 'inside',
start: 0,
end: 50,
},
{
show: false,
yAxisIndex: 0,
filterMode: 'empty',
width: 12,
height: '80%',
showDataShadow: false,
left: '93%',
handleSize: 8
}
],
series: [{
name: '进入数',
type: 'bar',
data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'],
//['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], // this.inNum, //obama_budget_2012.budget2011List
color: "#00B1FF"
},
{
name: '出去数',
type: 'bar',
data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'],
//['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], //this.outNum, //obama_budget_2012.budget2012List
color: "#FF6C00"
}
]
};
},
}
}
好了，你已经离成功不远了！！

接下来我们到页面上使用该组件，我们要设置他的id，把option内的配置也给他传过去，该图的宽高也在上面设置好，你会发现，这个时候多了一个柱状图出来

1

这就是一个简单的echarts柱状图使用，我也是走了很多弯路，看了许多的文章，觉得每个人的方法都不同，我只是把我认为好的方法放上来，希望对大家有所帮助。

最后附上一张效果图（当然，这些颜色都是可改的，具体可以看文档或者来问一下我，我都非常乐意解答）

附：报错:this.echarts.setCanvasCreator is not a function 的解决办法

echarts.vue页面引起的 prors不能传递方法

将刚才定制的echarts.js文件引入进去

1
import * as echarts from '@/common/echarts.min.js';
参数加this

1
2
3
this.ctx = wx.createCanvasContext(canvasId,this);

const query = wx.createSelectorQuery().in(this);
也可以直接复制代码进去,注意修改echarts.js的路径

插件市场