当前位置：网站首页>Wechat applet realizes broken line area chart rose chart three-dimensional histogram
Wechat applet realizes broken line area chart rose chart three-dimensional histogram
2022-07-24 02:24:00 【Su Su is little Su Su】
1. Realization effect
2. Realization principle
Official website ：https://echarts.apache.org/zh/index.html
echarts Community ：http://www.ppchart.com/#/
Some chart types ：
series-line
A line chart is a chart that uses a line to connect data point markers , Used to show the changing trend of data . It can be used in rectangular coordinate system and polar coordinate system .
Tip: Set up areaStyle After that, you can draw an area map .
Tip: Matching segmented type visualMap Components can be broken lines / The area map is partitioned by different colors .
series-bar
Histogram （ Or bar chart ） It's a height through a column （ In the horizontal case, it is the width ） A common chart type used to represent the size of data .
series-pictorialBar
Hieroglyphic column diagram can set various concrete graphic elements （ Such as images 、SVG PathData etc. ） The histogram of . Often used in information graphs . Used in rectangular coordinate system with at least one category axis or time axis .
series-pie
Pie chart is mainly used to show the proportion of different categories of data in the total . Each radian represents a proportion of the amount of data .
For a scenario with multiple pie charts in a chart , have access to left、right、top、bottom、width、height Configure the position and viewport size of each pie chart series .radius、label.edgeDistance And other configuration items that support percentage , It is relative to the size of the rectangle determined by the configuration item .
Tip: Pie chart is more suitable for showing the percentage of data relative to the total . If it only represents the size of data in different categories , It is recommended to use Histogram , People are less sensitive to small arc differences than to small length differences , Or you can configure roseType Displayed as a South Dingle map , Differentiate the size of data by radius size .
Some parameter meanings ：
grid：
Drawing grid in rectangular coordinate system , Single grid Up to two can be placed inside X Axis , Left and right Y Axis . You can draw a line chart on the grid , Histogram , Scatter plot （ Bubble chart ）.
Such as ：
grid: {
// The distance from the chart to the border
left: 10,
right:20,
top: 40,
bottom: 10,
containLabel: true,
},
animation
Whether to turn on the animation .
animationDuration
The duration of the initial animation , Supports callback functions , You can return different duration of each data to achieve a more dramatic initial animation effect ：
showSymbol
Broken line middle ： Whether or not shown symbol, If false Only in tooltip hover Show when .
symbol
The figure of the mark .
ECharts The types of tags provided include 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'.
Can pass 'image://url' Set to picture , among URL Links to pictures , perhaps dataURI.
eg：
showSymbol: true, // Whether to display dots by default
symbol: "circle", // The default is a hollow circle （ The middle is white ）, Change to solid circle
graphic
graphic Is a native graphic element component . Graphic elements that can be supported include ：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group.
3. Implementation code
<view class="box">
<ec-canvas id="mychart-dom-bar" ec="{
{ ec }}"></ec-canvas>
</view>
<view class="box">
<ec-canvas id="mychart-dom-line" ec="{
{ ec }}"></ec-canvas>
</view>
<view class="box">
<ec-canvas id="mychart-dom-line1" ec="{
{ ec }}"></ec-canvas>
</view>
<view class="box">
<ec-canvas id="mychart-dom-pie" ec="{
{ ec }}"></ec-canvas>
</view>
page {
background: linear-gradient(90deg, #03224e 0%, #011030 100%);
}
.box {
width: 100%;
height: 550rpx;
}
import * as echarts from '../../components/ec-canvas/echarts';
Page({
data: {
ec: {
lazyLoad: true // Delay loading
}
},
onLoad: function (options) {
this.echartsComponnet = this.selectComponent('#mychart-dom-bar');
this.getData('echartsComponnet', 0); // get data
this.echartsComponnetLine = this.selectComponent('#mychart-dom-line');
this.getData('echartsComponnetLine', 1); // get data
this.echartsComponnetLine1 = this.selectComponent('#mychart-dom-line1');
this.getData('echartsComponnetLine1', 2); // get data
this.echartsComponnetpie = this.selectComponent('#mychart-dom-pie');
this.getData('echartsComponnetpie', 3); // get data
},
/** * Get chart data */
getData(type, action) {
this[type].init((canvas, width, height, dpr) => {
const Chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
Chart.setOption(this.getOption(action));
return Chart;
});
},
/** * Chart init */
getOption(e) {
if (e == 0) {
return this.getBar([" service 1", " service 2", " service 3", " service 4", " service 5"], [2, 5, 1, 8, 1])
}
if (e == 1) {
return this.getLine([" service 1", " service 2", " service 3", " service 4", " service 5"], [2, 5, 1, 8, 1], 1)
}
if (e == 2) {
return this.getLine([" service 1", " service 2", " service 3", " service 4", " service 5"], [2, 22, 55, 22, 44], 2)
}
if (e == 3) {
return this.getPie()
}
},
/** * get data */
getBar(xData, yData) {
let colorArr = ["#2886c6", "#50bfda", "#89e3ec"],
color = {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [{
offset: 0,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[1],
},
{
offset: 1,
color: colorArr[1],
},
],
},
barWidth = 20,
bottomData = [],
topData = [];
yData.filter((item) => {
if (item) {
bottomData.push(1);
topData.push(item);
} else {
bottomData.push(0);
topData.push({
value: 1,
itemStyle: {
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
color: "rgba(0,0,0,0)",
},
},
});
}
});
let option = {
animation: true, // Control whether the animation is turned on
animationDuration: 5000, // The length of animation , It is in milliseconds
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,.5)",
axisPointer: {
type: "cross",
label: {
backgroundColor: "rgba(0,0,0,.5)",
},
},
textStyle: {
color: "#fff",
fontSize: 14,
},
},
grid: {
// The distance from the chart to the border
left: 10,
right:20,
top: 40,
bottom: 10,
containLabel: true,
},
xAxis: {
data: xData,
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255,255,255,.8)", // Font color of coordinates
fontSize: 12,
},
},
yAxis: {
axisLine: {
show: true,
},
axisLabel: {
show: true,
color: "rgba(255,255,255,.8)", // Font color of coordinates
fontSize: 12,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.25)",
type: "dashed",
},
// Grid line color
},
},
series: [{
z: 1,
name: " data ",
type: "bar",
barWidth: barWidth,
barGap: "0%",
data: yData,
itemStyle: {
normal: {
color: color,
},
},
},
{
z: 2,
name: " data ",
type: "pictorialBar",
data: bottomData,
symbol: "diamond",
symbolOffset: ["0%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color,
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: " data ",
type: "pictorialBar",
symbolPosition: "end",
data: topData,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
borderColor: colorArr[2],
borderWidth: 2,
color: colorArr[2],
},
},
tooltip: {
show: false,
},
},
],
};
return option;
},
getLine(xData, yData, type) {
let datacoords = [{
coords: [],
}, ];
for (let i = 0; i < xData.length; i++) {
datacoords[0].coords.push([xData[i], yData[i]]);
}
console.log(datacoords)
let s1 = [{
name: " Su Su, little Su Su ",
type: "line",
smooth: type == 2,
smoothMonotone: "x",
lineStyle: {
width: 1.5,
type: "solid",
shadowOffsetX: 0, // Polyline X The offset
shadowOffsetY: 3, // Polyline Y The offset
shadowBlur: 4, // The broken line is blurred
opcity: 1,
shadowColor: "rgba(220,120,40,0.95)", // Line color
},
showSymbol: false,
itemStyle: {
color: "#DC7828",
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 1,
color: "rgba(220,120,40,0.3)",
},
{
offset: 0.74,
color: "rgba(220,120,40,0.26)",
},
{
offset: 0,
color: "rgba(220,120,40,0)",
},
]),
},
emphasis: {
focus: "series",
},
data: yData,
}],
s2 = [{
name: " Su Su, little Su Su 222",
type: "line",
smooth: type == 2,
lineStyle: {
color: "#00CCA9",
width: 1.5,
type: "solid",
shadowOffsetX: 0, // Polyline X The offset
shadowOffsetY: 3, // Polyline Y The offset
shadowBlur: 4, // The broken line is blurred
shadowColor: "rgba(0,204,169,0.95)", // Line color
},
showSymbol: true, // Whether to display dots by default
symbol: "circle", // The default is a hollow circle （ The middle is white ）, Change to solid circle
symbolSize: 7, // Set the size of the solid point
itemStyle: {
color: "#021E47", // Background color of solid dots ----- Round and transparent ！！！！！！！
borderWidth: 1, // Dot border size
borderColor: "#00CCA9", // Solid dot border color
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 1,
color: "rgba(0,204,169,0.3)",
},
{
offset: 0,
color: "rgba(0,204,169,0)",
},
]),
},
emphasis: {
focus: "series",
},
data: yData,
},
];
let option = {
animation: true, // Control whether the animation is turned on
animationDuration: 3000, // The length of animation , It is in milliseconds
backgroundColor: "transparent",
color: ["#ec5d5f", "#f2cb58", "#64a0c8"],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,.5)",
axisPointer: {
type: "cross",
label: {
backgroundColor: "rgba(0,0,0,.5)",
},
},
textStyle: {
color: "#fff",
fontSize: 14,
},
},
grid: {
left: 10,
top: 40,
bottom: 10,
right:20,
containLabel: true,
},
xAxis: [{
nameGap: 3,
nameTextStyle: {
// Axis units
color: "rgba(255,255,255,.8)",
fontSize: 12,
},
type: "category",
data: xData,
boundaryGap: false, // from 0 Start
axisLine: {
rotate: 30, // Axis content is too long rotation
interval: 0,
lineStyle: {
color: "#636E7C",
},
},
axisLabel: {
color: "rgba(255,255,255,.8)", // Font color of coordinates
fontSize: 12,
},
axisTick: {
// Axis scale color x and y No crossing
show: false,
},
}, ],
yAxis: [{
name: " people ",
min: 0,
max: function (value) {
return Math.ceil(value.max / 5) * 5;
},
splitNumber: 5,
type: "value",
nameTextStyle: {
// Axis units
color: "rgba(255,255,255,.89)",
fontSize: 12,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.25)",
type: "dashed",
},
// Grid line color
},
axisTick: {
// Axis scale color
show: false,
},
axisLine: {
// Axis color
show: true,
lineStyle: {
color: "#636E7C",
},
},
axisLabel: {
color: "rgba(255,255,255,.8)", // Font color of coordinates
fontSize: 12,
},
}, ],
series: type == 1 ? s2 : s1
}
return option;
},
getPie() {
let option = {
color: [
"#3D75FC",
"#3E46CE",
"#E45C7E",
"#2DB4D1",
"#CBAE2E",
"#5ECAB9",
"#D36640",
],
animation: true, // Control whether the animation is turned on
animationDuration: 5000, // The length of animation , It is in milliseconds
animationEasing: "bounceOut", // Slow motion animation
animationThreshold: 8, // Threshold value of animation element
tooltip: {
trigger: "item",
formatter: " Susu {b} : {c} ({d}%",
position: function (point, params, dom, rect, size) {
let x = 0;
let y = 0;
let pointX = point[0];
let pointY = point[1];
let boxWidth = size.contentSize[0];
let boxHeight = size.contentSize[1];
if (boxWidth > pointX) {
x = 5;
} else {
x = pointX - boxWidth;
}
if (boxHeight > pointY) {
y = 5;
} else {
y = pointY - boxHeight;
}
return [x, y];
},
},
legend: {
type: "scroll",
orient: "vertical",
right: '10%',
top: "center",
icon: "rect",
itemWidth: 10, // Set width
itemHeight: 10, // Set height
selectedMode: true,
textStyle: {
color: "#fff",
fontSize: 12,
},
formatter: function (name) {
return name.length > 5 ? name.substr(0, 5) + "..." : name;
},
tooltip: {
show: true,
},
},
series: [{
minAngle: 5, // Minimum sector angle （0 ~ 360）, It is used to prevent the interaction from being affected by too small a sector due to too small a value
avoidLabelOverlap: true, // Whether to enable label overlap prevention policy
labelLine: {
minTurnAngle: 0,
},
type: "pie",
radius: [20, 120],
center: ["30%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 0,
},
label: {
show: false,
},
data: [{
value: 88,
name: "rose 1"
},
],
}, ],
};
return option
}
})
4. More applet related , Official account Su Su bug, More applets demo, All in Su Su's code cloud If it helps you , Welcome to star+ subscribe ！
边栏推荐
- Combined with actual combat, analyze gb/t 28181 (II) -- equipment directory synchronization
- Backward quantum cryptography migration! NIST announces 12 Partners
- Wallys/DR4019S/IPQ4019/11ABGN/802.11AC/high power
- Network protocol details: UDP
- [重要通知]星球线上培训第三期来袭！讲解如何在QTYX上构建自己的量化策略！...
- Go basic notes_ 5_ Array slice
- Magazine feature: the metauniverse will reshape our lives, and we need to make sure it gets better
- Responsive pbootcms template decoration design website
- stb_ Image replaces other libraries
- Halide::Generator生成器使用说明
猜你喜欢
餐饮连锁门店重塑增长背后的数字化转型
Distributed resource management and task scheduling framework yarn
wallys/WiFi6 MiniPCIe Module 2T2R2 × 2.4GHz 2x5GHz MT7915 MT7975
ggplot2显示png
![STM32 concept and installation [day 1]](/img/20/09229fb7ab0a1fcdae25114b7236de.png)
STM32 concept and installation [day 1]
利用宝塔面板计划任务执行自动推送网址到百度收录
WordPress website SEO complete tutorial
Is software testing still popular in 2022?
我国科学家在高安全量子密钥分发网络方面取得新进展
The difference between.Split (",", -1) and.Split (",")
随机推荐
原生组件、小程序与客户端通信原理、video、map、canvas、picker等运行原理
The new red envelope cover platform can build the source code of the independent background of the sub station
Crop leaf disease identification system
使用第三方账号登录
组件el-scrollbar的使用
Tensorflow 2.0 deep learning tutorial
Combined with actual combat, analyze gb/t 28181 (II) -- equipment directory synchronization
canvas-绘图（鼠标按下 绘制 抬起 结束）
Implementation of POP3 client code
STM32 concept and installation [day 1]
[untitled]
Use the pagoda panel to plan tasks and automatically push the website to Baidu for inclusion
【数据集】——flyingthings3d光流部分数据集下载
Tdengine helps Siemens' lightweight digital solution simicas simplify data processing process
以科技传递温度，vivo守护生物多样性之美
【FPGA教程案例38】通信案例8——基于FPGA的串并-并串数据传输
【补题日记】[2022牛客暑期多校1]I-Chiitoitsu
Detailed comparison between graphic array and linked list, performance test
微信小程序之性能优化（分包、运行流程细节、精简结构、原生组件通信）
MySQL---four JDBC