需求背景
需要設(shè)計(jì)一個(gè)關(guān)于能耗分析的頁面淋袖，且耗用標(biāo)準(zhǔn)需要根據(jù)室外溫度判斷，涉及到維度比較多锯梁。
一般畫圖都自然想到echart里面找實(shí)例即碗，這次的需求稍微有點(diǎn)麻煩焰情，所以分成兩步走：
第一步：找到合適的實(shí)例
echarts官網(wǎng)地址：https://echarts.apache.org/zh/index.html
有一個(gè)比較適合的折柱混合圖
地址：https://echarts.apache.org/examples/zh/editor.html?c=mix-line-bar
image.png
目前，還缺的是根據(jù)標(biāo)準(zhǔn)判斷顏色剥懒，所以需要簡單的調(diào)整一下内舟，增加一下線段的顏色
image.png
最終的代碼塊如下，不一定符合標(biāo)準(zhǔn)只是為了畫圖
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['日均耗電', '耗電標(biāo)準(zhǔn)', '日均溫度']
},
xAxis: [
{
type: 'category',
data: ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07','09-08','09-10','09-11','09-12','09-13','09-14','09-15'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '耗電量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} KW/h'
}
},
{
type: 'value',
name: '日均溫度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
visualMap: {
show: false,
dimension: 0,
seriesIndex:0,
pieces: [
{
lte: 6,
color: 'green'
},
{
gt: 6,
lte: 8,
color: 'red'
},
{
gt: 8,
lte: 20,
color: 'green'
},
{
gt: 14,
lte: 15,
color: 'red'
},
{
gt: 17,
color: 'green'
}
]
},
series: [
{
name: '日均耗電',
type: 'line',
color: 'rgba(15, 15, 110, 0.6)',
tooltip: {
valueFormatter: function (value) {
return value + ' KW/h';
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 66.7, 120.6, 122.2, 39.6, 20.0, 6.4, 3.3
]
},
{
name: '耗電標(biāo)準(zhǔn)',
type: 'line',
color: 'rgba(0, 255, 0, 0.6)',
tooltip: {
valueFormatter: function (value) {
return value + 'KW/h';
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 115.6, 102.2, 38.7, 18.8, 6.0, 2.3
]
},
{
name: '日均溫度',
type: 'bar',
color: 'rgba(255, 173, 177, 0.4)',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: [20, 22.2, 23.3, 24.5, 16.3, 19.2, 20.3, 23.4, 23.0, 16.5, 12.0, 16.2]
}
]
};
第二步：將實(shí)例嵌入原型
0初橘、將echarts左邊的代碼復(fù)制保存
從operation開始替換下方的代碼
javascript:
var script = document.createElement('script');
script.type = "text/javascript";
script.src ="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js";
document.head.appendChild(script);
setTimeout(function(){
var dom =$('[data-label=ddd]').get(0);
//注意”ddd? 為元件框的名字
var myChart = echarts.init(dom);
var option = {
tooltip: {
formatter: '{a} <br/>验游 : {c}%'
},
series: [
{
name: 'Pressure',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}'
},
data: [
{
value: 50,
name: '”√μá??'
}
]
}
]
};
//從”options“開始替換
if (option && typeof option === "object"){
myChart.setOption(option, true);
}}, 800);
1、創(chuàng)建一個(gè)空白矩形框保檐，并命名為ddd
image.png
2耕蝉、添加交互載入時(shí)打開鏈接-插入鏈接-fx
image.png
3、點(diǎn)擊確定保存夜只，然后預(yù)覽既可看到
image.png
參考鏈接：
https://blog.csdn.net/M_amazing/article/details/96151401
https://blog.csdn.net/weixin_53533554/article/details/125537852
