Article directory
overview
Use echarts in applets (simple and detailed)
Use echarts in the applet
It is introduced in the echarts official website: The echarts-for-weixin project provides a small program component, which can be used conveniently in this way.
step:
1. ec-canvas
Click the link above to download the project ec-canvas
2. Download project
Download this project folder to your computer
注意：需注意下载的是哪个版本，之后在echarts官网定制时选用的版本是和这个项目的版本一样的，否则可能出不来，小程序中不会放很多的echarts图表，否则整个项目太大了，会带不动，所以小程序一般是使用在线定制
3. Go to echarts official website to customize:
Click Download - Download - Online Customization in Method 3
在定制页面中选择你需要使用的图表，注意！注意！注意！这里的选择版本，必须和上面下载的ec-canvas中的echarts.js的版本对应，必须！必须！必须！选择完成后，翻到最下面点击下载按钮。
4. Click to download
After the download is complete, find the downloaded file: echarts.min.js, and then create a new component in your applet project, put the echarts directory in it, delete the echarts.js in the original directory, it is too big, replace it with the echarts downloaded in the previous step .min.js, another point to note is that the import of ec-canvas.js imports the original echarts.js file, you need to change it to the file you just downloaded
5. Introduction and use
Then you can import and use it, import this file in the js file (find the location of this file yourself and import it)
import * as echarts from '../../components/echarts/echarts.min'
function bar(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
// devicePixelRatio: dpr
});
canvas.setChart(chart);
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
chart.setOption(option);
return chart;
}
Write in date:
data: {
ec: {
onInit: bar
},
},
All operations are in the option, if you need to configure other properties, you can view the configuration item manual or open the sample configuration
The JSON file imports the ec-canvas.js
WXML file in the directory: the ec here is the component object, corresponding to the ec of the data in the js file
<view class="ec-box">
<ec-canvas canvas-id="echart-bar" ec="{
{ec}}"></ec-canvas>
</view>
wxss file: (set width and height for echarts container)
ec1-box {
width: 100%;
height: 406rpx;
}
In this way, the introduction and use of echarts is successful.
The option configuration knowledge points of echarts are summarized (still being updated):
- General:
1、grid: {
left: "0", //距离容器左边的距离
right: "0", //距离容器右边的距离
bottom: "0", //距离容器下边的距离
top: "33", //距离容器上边的距离
containLabel: true //是否显示坐标轴
},
2、xAxis: [{
type: 'category', // 坐标轴类型
// prettier-ignore
axisLabel: {
// 设置X轴坐标轴名称字体样式
textStyle: {
fontSize: "10",
fontWeight: '400',
color: '#999999',
fontFamily: 'PingFangSC-Regular, PingFang SC'
},
},
axisTick: {
show: false // 是否显示X轴坐标轴刻度
},
axisLine: {
show: false // 是否显示X轴坐标轴线
},
data: ['07/08', '07/09', '07/10', '今天'] // X轴字段数据
}],
3、yAxis: [{
type: 'value', // 坐标轴类型
axisLabel: {
// 设置Y轴坐标轴名称字体样式
textStyle: {
fontSize: "10",
fontWeight: '400',
color: '#999999',
fontFamily: 'PingFangSC-Regular, PingFang SC'
},
},
name: '元', // 设置Y轴坐标轴单位
nameTextStyle: {
// 单位样式
color: "#999999", // 字体颜色
fontSize: 10, // 字体大小
padding: [0, 26, 0, 0], // 内填充
fontFamily: 'PingFangSC-Regular, PingFang SC', // 字体
fontWeight: 400,
}
}],
4、tooltip: {
// 提示框组件
show: true,
confine: false, //是否将 tooltip 框限制在图表的区域内
backgroundColor: 'rgba(0,0,0,0.65)', //提示框浮层背景色
trigger: 'axis',
dashOffset: 10,
padding: 6, //上右下左内边距
textStyle: {
//提示框浮层的文本样式
color: '#fff',
fontSize: 10,
lineHeight: 10,
},
axisPointer: {
//坐标轴指示器配置项
type: 'line', //直线指示器
z: 1,
lineStyle: {
type: 'dashed',
color: '#979797',
shadowOffsetY: -7,
shadowColor: '#979797',
}
},
},
5、 legend: {
// 图例组件
orient: 'horizontal', // 布局朝向（横向/（纵向：vertical））
right: 0, // legend位置调整
icon: "circle", // legend标记样式
itemHeight: 8, // legend标记样式高度
itemWidth: 8, // legend标记样式宽度
itemGap: 12, // legend标记的间距
textStyle: {
// 图例文本样式
fontSize: 10,
fontFamily: 'PingFangSC-Regular, PingFang SC',
fontWeight: 400,
color: '#666666',
padding: [0, 0, 0, 6] //文字与图形之间的左右间距
},
data: ['收入', '支出'] //图例数据数组
},
- Column chart:
1、series: [{
// 双柱图数据
name: '收入',
type: 'bar',
barWidth: '10', // 柱状图宽度
barGap: '60%',
label: {
// 设置显示label
show: true,
// 设置label的位置
position: 'top',
// 设置label的文字颜色
color: '#999999',
fontFamily: 'PingFangSC-Regular, PingFang SC',
fontWeight: 500,
fontSize: '10',
// 格式化label文字
formatter: function (data) {
return Math.round(data.value).toFixed(2)
},
},
data: [
25.6, 76.7, 135.6, 162.2,
],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
// 设置柱状图渐变色
offset: 0,
color: "#FF991C" // 0% 处的颜色
}, {
offset: 0.6,
color: "#ffb720" // 60% 处的颜色
}, {
offset: 1,
color: "#FFCD24 " // 100% 处的颜色
}], false),
barBorderRadius: [3, 3, 0, 0], // 柱形图圆角
},
},
{
name: '支出',
type: 'bar',
barWidth: '10', // 柱状图宽度
label: {
// 设置显示label
show: true,
// 设置label的位置
position: 'top',
// 设置label的文字颜色
color: '#999999',
fontFamily: 'PingFangSC-Regular, PingFang SC',
fontWeight: 500,
fontSize: '10',
// 格式化label文字
formatter: function (data) {
return Math.round(data.value).toFixed(2)
},
},
data: [
70.7, 175.6, 182.2, 48.7
],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
// 设置柱状图渐变色
offset: 0,
color: "#4186F5" // 0% 处的颜色
}, {
offset: 0.6,
color: "#73affa" // 60% 处的颜色
}, {
offset: 1,
color: "#9CD2FF " // 100% 处的颜色
}], false),
barBorderRadius: [3, 3, 0, 0], // 柱形图圆角
},
}
]
- line chart:
1、 series: [{
// 折线图数据
name: '完成订单',
type: 'line',
stack: 'Total',
symbol: 'circle', // 折线图折点样式(实心)
symbolSize: 4, // 折线图折点的大小样式
lineStyle: {
color: 'pink' // 设置折线颜色
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '取消订单',
type: 'line',
symbol: 'circle', // 折线图折点样式(实心)
symbolSize: 4, // 折线图折点的大小样式
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
]
};
summary
The above are the knowledge points of using echarts steps in the mini program. If you like it, please like and bookmark it! Thanks!
- I wish: peace and success