当前位置：网站首页>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 ！
边栏推荐
- 程序员必备技能----断点调试（IDEA版）
- 关于 SAP Fiori 应用的离线使用
- After five years of contact with nearly 100 bosses, as a headhunter, I found that the secret of promotion was only four words
- STM32 installation tutorial and j-link burning driver installation tutorial [the next day]
- WordPress website SEO complete tutorial
- Backward quantum cryptography migration! NIST announces 12 Partners
- 【补题日记】[2022牛客暑期多校1]I-Chiitoitsu
- This article shows you how to use SQL to process weekly report data
- Digital transformation behind the reshaping growth of catering chain stores
- Magazine feature: the metauniverse will reshape our lives, and we need to make sure it gets better
猜你喜欢
View binding confusion. I have been studying confusion for two days.
pbootcms模板调用标签序数从2开始或者自动数开始
IBM: realize the quantum advantage of fault tolerance by 2030
Brief introduction of tfw6524 perfectly replacing imported pt6524 chip
Upload files to flash file system through Arduino IDE
Responsive layout a web page displays different effects on different devices) meta:vp
Jmeter+influxdb+grafana pressure measurement real-time monitoring platform construction
小散量化炒股记｜基于多任务爬虫技术， 实现A股实时行情Level1采样
JDBC tool class
Distributed resource management and task scheduling framework yarn
随机推荐
Use the pagoda panel to plan tasks and automatically push the website to Baidu for inclusion
Writing of graph nodes that trigger different special effects during the day and at night in Tiktok
C - structure
氢能创业大赛 | 国华投资董事长刘小奇：发挥风光氢储融一体化优势 高水平承办创业大赛
无需编码，自动实现“异步 Request-Reply”模式
Redraw the button and make your own circular LED indicator
View Binding 混淆问题。我两天都在研究混淆。
How to judge null for different types of fields, sets, lists / sets / maps, and objects
Is software testing still popular in 2022?
Halide:: generator instructions
微信小程序之性能优化（分包、运行流程细节、精简结构、原生组件通信）
C language curriculum - personal information management system (including student grades and consumption records)
Tdengine helps Siemens' lightweight digital solution simicas simplify data processing process
关于缺少编程基础的朋友想转行 ABAP 开发岗提出的一些咨询问题和解答
Jmeter+influxdb+grafana pressure measurement real-time monitoring platform construction
[重要通知]星球线上培训第三期来袭！讲解如何在QTYX上构建自己的量化策略！...
Resumption: a deck of cards (54), three people fighting the landlord, what is the probability that the big and small kings are in the same family
深入了解-微信开发者工具
Crud operation of mongodb (2)
Reconnaître le Protocole de couche de transport - TCP / UDP