微信小程序實現折線面積圖-玫瑰圖-立體柱狀圖

蘇蘇就是小蘇蘇 2022-07-24 02:24:11 阅读数:652

程序玫瑰

1.實現效果

在這裏插入圖片描述

2.實現原理

官網:https://echarts.apache.org/zh/index.html
echarts社區:http://www.ppchart.com/#/

一些圖錶類型:

series-line

折線圖是用折線將各個數據點標志連接起來的圖錶,用於展現數據的變化趨勢。可用於直角坐標系和極坐標系上。
Tip: 設置 areaStyle 後可以繪制面積圖。
Tip: 配合分段型 visualMap 組件可以將折線/面積圖通過不同顏色分區間。

series-bar

柱狀圖(或稱條形圖)是一種通過柱形的高度(橫向的情况下則是寬度)來錶現數據大小的一種常用圖錶類型。

series-pictorialBar

象形柱圖是可以設置各種具象圖形元素(如圖片、SVG PathData 等)的柱狀圖。往往用在信息圖中。用於有至少一個類目軸或時間軸的直角坐標系上。

series-pie

餅圖主要用於錶現不同類目的數據在總和中的占比。每個的弧度錶示數據數量的比例。
對於一個圖錶中有多個餅圖的場景,可以使用 left、right、top、bottom、width、height 配置每個餅圖系列的比特置和視口大小。radius、label.edgeDistance 等支持百分比的配置項,是相對於該配置項决定的矩形的大小而言的。
Tip: 餅圖更適合錶現數據相對於總數的百分比等關系。如果只是錶示不同類目數據間的大小,建議使用 柱狀圖,人們對於微小的弧度差別相比於微小的長度差別更不敏感,或者也可以通過配置 roseType 顯示成南丁格爾圖,通過半徑大小區分數據的大小。

一些參數意義:

grid:

直角坐標系內繪圖網格,單個 grid 內最多可以放置上下兩個 X 軸,左右兩個 Y 軸。可以在網格上繪制折線圖,柱狀圖,散點圖(氣泡圖)。

如:

 grid: {
 //圖錶距邊框的距離
left: 10,
right:20,
top: 40,
bottom: 10,
containLabel: true,
},

animation

是否開啟動畫。

animationDuration

初始動畫的時長,支持回調函數,可以通過每個數據返回不同的時長實現更戲劇的初始動畫效果:

showSymbol

折線中:是否顯示 symbol, 如果 false 則只有在 tooltip hover 的時候顯示。

symbol

標記的圖形。
ECharts 提供的標記類型包括'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。
可以通過 'image://url' 設置為圖片,其中 URL 為圖片的鏈接,或者 dataURI。

eg:

showSymbol: true, //是否默認展示圓點
symbol: "circle", // 默認是空心圓(中間是白色的),改成實心圓

graphic

graphic 是原生圖形元素組件。可以支持的圖形元素包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group。

3.實現代碼

<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 // 延遲加載
}
},
onLoad: function (options) {

this.echartsComponnet = this.selectComponent('#mychart-dom-bar');
this.getData('echartsComponnet', 0); //獲取數據
this.echartsComponnetLine = this.selectComponent('#mychart-dom-line');
this.getData('echartsComponnetLine', 1); //獲取數據
this.echartsComponnetLine1 = this.selectComponent('#mychart-dom-line1');
this.getData('echartsComponnetLine1', 2); //獲取數據
this.echartsComponnetpie = this.selectComponent('#mychart-dom-pie');
this.getData('echartsComponnetpie', 3); //獲取數據
},
/** * 獲取圖錶數據 */
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;
});
},
/** * 圖錶init */
getOption(e) {

if (e == 0) {

return this.getBar(["服務1", "服務2", "服務3", "服務4", "服務5"], [2, 5, 1, 8, 1])
}
if (e == 1) {

return this.getLine(["服務1", "服務2", "服務3", "服務4", "服務5"], [2, 5, 1, 8, 1], 1)
}
if (e == 2) {

return this.getLine(["服務1", "服務2", "服務3", "服務4", "服務5"], [2, 22, 55, 22, 44], 2)
}
if (e == 3) {

return this.getPie()
}
},
/** * 獲取數據 */
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, //控制動畫示否開啟
animationDuration: 5000, // 動畫的時長,它是以毫秒為單比特
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,
right:20,
top: 40,
bottom: 10,
containLabel: true,
},
xAxis: {

data: xData,
axisTick: {

show: false,
},
axisLabel: {

color: "rgba(255,255,255,.8)", //坐標的字體顏色
fontSize: 12,
},
},
yAxis: {

axisLine: {

show: true,
},
axisLabel: {

show: true,
color: "rgba(255,255,255,.8)", //坐標的字體顏色
fontSize: 12,
},
splitLine: {

show: true,
lineStyle: {

color: "rgba(255,255,255,.25)",
type: "dashed",
},
//網格線顏色
},
},
series: [{

z: 1,
name: "數據",
type: "bar",
barWidth: barWidth,
barGap: "0%",
data: yData,
itemStyle: {

normal: {

color: color,
},
},
},
{

z: 2,
name: "數據",
type: "pictorialBar",
data: bottomData,
symbol: "diamond",
symbolOffset: ["0%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {

normal: {

color: color,
},
},
tooltip: {

show: false,
},
},
{

z: 3,
name: "數據",
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: "蘇蘇小蘇蘇",
type: "line",
smooth: type == 2,
smoothMonotone: "x",
lineStyle: {

width: 1.5,
type: "solid",
shadowOffsetX: 0, // 折線的X偏移
shadowOffsetY: 3, // 折線的Y偏移
shadowBlur: 4, // 折線模糊
opcity: 1,
shadowColor: "rgba(220,120,40,0.95)", //折線顏色
},
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: "蘇蘇小蘇蘇222",
type: "line",
smooth: type == 2,
lineStyle: {

color: "#00CCA9",
width: 1.5,
type: "solid",
shadowOffsetX: 0, // 折線的X偏移
shadowOffsetY: 3, // 折線的Y偏移
shadowBlur: 4, // 折線模糊
shadowColor: "rgba(0,204,169,0.95)", //折線顏色
},
showSymbol: true, //是否默認展示圓點
symbol: "circle", // 默認是空心圓(中間是白色的),改成實心圓
symbolSize: 7, //設定實心點的大小
itemStyle: {

color: "#021E47", //實心的圓點的背景顏色-----圓透明!!!!!!!
borderWidth: 1, //圓點邊框大小
borderColor: "#00CCA9", //實心的圓點邊框顏色
},
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, //控制動畫示否開啟
animationDuration: 3000, // 動畫的時長,它是以毫秒為單比特
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: {

//坐標軸單比特
color: "rgba(255,255,255,.8)",
fontSize: 12,
},
type: "category",
data: xData,
boundaryGap: false, //從0開始
axisLine: {

rotate: 30, //坐標軸內容過長旋轉
interval: 0,
lineStyle: {

color: "#636E7C",
},
},
axisLabel: {

color: "rgba(255,255,255,.8)", //坐標的字體顏色
fontSize: 12,
},
axisTick: {

//坐標軸刻度顏色 x和y不交叉
show: false,
},
}, ],
yAxis: [{

name: "人",
min: 0,
max: function (value) {

return Math.ceil(value.max / 5) * 5;
},
splitNumber: 5,
type: "value",
nameTextStyle: {

//坐標軸單比特
color: "rgba(255,255,255,.89)",
fontSize: 12,
},
splitLine: {

show: true,
lineStyle: {

color: "rgba(255,255,255,.25)",
type: "dashed",
},
//網格線顏色
},
axisTick: {

//坐標軸刻度顏色
show: false,
},
axisLine: {

//坐標軸線顏色
show: true,
lineStyle: {

color: "#636E7C",
},
},
axisLabel: {

color: "rgba(255,255,255,.8)", //坐標的字體顏色
fontSize: 12,
},
}, ],
series: type == 1 ? s2 : s1
}
return option;
},
getPie() {

let option = {

color: [
"#3D75FC",
"#3E46CE",
"#E45C7E",
"#2DB4D1",
"#CBAE2E",
"#5ECAB9",
"#D36640",
],
animation: true, //控制動畫示否開啟
animationDuration: 5000, // 動畫的時長,它是以毫秒為單比特
animationEasing: "bounceOut", //緩動動畫
animationThreshold: 8, //動畫元素的閾值
tooltip: {

trigger: "item",
formatter: "蘇蘇{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, // 設置寬度
itemHeight: 10, // 設置高度
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, //最小的扇區角度(0 ~ 360),用於防止某個值過小導致扇區太小影響交互
avoidLabelOverlap: true, //是否啟用防止標簽重疊策略
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.更多小程序相關,關注公眾號 蘇蘇的bug,更多小程序demo,盡在蘇蘇的碼雲如果對你有幫助,歡迎你的star+訂閱!

版权声明:本文为[蘇蘇就是小蘇蘇]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/205/202207240223467711.html