需求背景
需要设计一个关于能耗分析的页面，且耗用标准需要根据室外温度判断，涉及到维度比较多。
一般画图都自然想到echart里面找实例，这次的需求稍微有点麻烦，所以分成两步走：
第一步：找到合适的实例
echarts官网地址：https://echarts.apache.org/zh/index.html
有一个比较适合的折柱混合图
地址：https://echarts.apache.org/examples/zh/editor.html?c=mix-line-bar
image.png
目前，还缺的是根据标准判断颜色，所以需要简单的调整一下，增加一下线段的颜色
image.png
最终的代码块如下，不一定符合标准只是为了画图
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: ['日均耗电', '耗电标准', '日均温度']
},
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: '耗电标准',
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]
}
]
};
第二步：将实例嵌入原型
0、将echarts左边的代码复制保存
从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/>{b} : {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、创建一个空白矩形框，并命名为ddd
image.png
2、添加交互载入时打开链接-插入链接-fx
image.png
3、点击确定保存，然后预览既可看到
image.png
参考链接：
https://blog.csdn.net/M_amazing/article/details/96151401
https://blog.csdn.net/weixin_53533554/article/details/125537852
