昨天一个好朋友扔过来这样一张图，让帮忙看看。虽然很忙，但是没做过图标的我很是好奇，就答应下来帮忙看下。看似一个简单的折线图，实则需求很复杂。仔细分析之后需求如下：
设计图
1.两条X轴，X1轴坐标显示，X2轴坐标隐藏
2.两个Y轴，Y轴都是从0开始，暂且称为Y1轴，Y2轴。Y1轴取值范围从0到8，以2间隔；Y2轴取值范围从0到5，以1为间隔
3.多条不同颜色的折线，折线点为实心圆
4.以X轴分段划分区域，设置不同背景色，区域中心设置文字，低风险、高风险
5.图标背景，以X轴方向的横条显示，底色为白色
6.右下角按钮 （不在画图范围内，暂时忽略）
7.X轴上按区域进行分段 蓝橙色提示😢
根据以上需求我开始选用ECharts画图，说到这里不得不提一句，ECharts真好用啊，强大的功能，清晰的API。我第一次使用就很容易，入门无门槛。😄
最终实现的效果如下：
实现效果
放大招😁
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 960px;
background: #fff;
max-width: 1024px;
margin: 0 auto;
}
#main2 {
margin-top: -120px;
}
.one,
.two {
position: relative;
}
.one .title {
position: absolute;
top: 120px;
font-size: 16px;
font-weight: 400;
color: #585858;
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.two .title {
position: absolute;
top: 120px;
left: 10px;
font-size: 16px;
font-weight: 700;
color: #585858;
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.one .sub {
position: absolute;
bottom: 76px;
font-style: italic;
font-size: 12px;
z-index: 2;
letter-spacing: 1px;
}
.one .sub1 {
left: 300px;
}
.one .sub2 {
left: 500px;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="box">
<div class="one">
<p class="title">交流干扰数据</p>
<p class="sub sub1">低风险</p>
<p class="sub sub2">高风险</p>
<div id="main1" style="height:290px"></div>
</div>
<div class="two">
<p class="title">通断电电位</p>
<div id="main2" style="height:260px"></div>
</div>
</div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line'
],
function (ec) {
var myChart1 = ec.init(document.getElementById('main1'));
var myChart2 = ec.init(document.getElementById('main2'));
var xAxisData = ['A-001','A-002','A-003','A-004','A-005'];
myChart1.setTheme("macarons");
myChart2.setTheme("macarons");
var option1 = {
color: '#585858',
tooltip : {trigger: 'axis'},
legend: {
x: 'right',
textStyle: {fontSize: 18,fontWeight: 400},
data:['交流电压','交流电流密度']
},
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: false, readOnly: false},
magicType : {show: false, type: ['line', 'stack', 'tiled']},
restore : {show: false},
saveAsImage : {show: false}
}
},
grid: {borderColor: '#fff'},
xAxis : [
{
type : 'category',
axisLine:{show: false},
axisLabel: {show: false},
splitArea: {
show: true,
areaStyle:{color: ['#ffffff','#ffffcd','#ffcdcd','#ffcdcd','#ffffff']}
},
splitLine: {show: false},
data : xAxisData,
}],
yAxis : [
{
type : 'value',
min: 0,
max: 5,
splitNumber: 5,
scale:true,
splitArea : {show : true},
textStyle: {color: '#fff'},
splitArea : {show : false},
axisLine:{lineStyle:{color:'#fff',}},
}
],
series : [
{
name:'交流电压',
type:'line',
smooth:false,
symbol: 'circle',
data:[2.4,4.4,1.8,2.8,3],
lineStyle:{color:'#ee7b31'},
itemStyle : {normal : {color:'#ee7b31'}
}
},
{
name:'交流电流密度',
type:'line',
smooth:false,
symbol: 'circle',
data:[4.2,2.3,3.5,4.5,2],
lineStyle:{color:'#5a9ad4'},
itemStyle : {normal : {color:'#5a9ad4'}}
},
],
}
var option2 = {
tooltip : {trigger: 'axis'},
legend: {
x: 'right',
y: 35,
show: true,
textStyle: {fontSize: 18,fontWeight: 400,},
data:['通电电位','断点电位', '土壤电阻率']
},
toolbox: {
y : -30,
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
grid: {borderColor: '#fff'},
xAxis : [
{
show: true,
type : 'category',
axisLine:{lineStyle:{color:'#fff'}},
splitArea: {
show: true,
areaStyle:{color: ['#ffffff','#ffffcd','#ffcdcd','#ffcdcd','#ffffff']}
},
data : xAxisData,
}],
yAxis : [
{
type : 'value',
min: 0,
max: 8,
splitNumber: 4,
scale:true,
splitArea : {show : false},
axisLine:{lineStyle:{color:'#fff'}
},
}
],
axis: {data : xAxisData},
series : [
{
name:'通电电位',
type:'line',
symbol: 'circle',
smooth:false,
data:[2,5,1,3,4],
lineStyle:{color:'#5a9ad4'},
itemStyle: {normal: { color:'#5a9ad4'}},
},
{
name:'断点电位',
type:'line',
symbol: 'circle',
smooth:false,
data:[4.2,2.2,1.8,2.8,3],
lineStyle:{color:'#ee7b31'},
itemStyle: {normal: {color:'#ee7b31'}},
},{
name:'土壤电阻率',
type:'line',
symbol: 'circle',
smooth:false,
data:[2,3,4,5,6],
lineStyle:{color:'#a7a7a7'},
itemStyle: {normal: {color:'#a7a7a7'},
},
}
]
}
// 为echarts对象加载数据
myChart1.setOption(option1);
myChart2.setOption(option2);
//联动配置
myChart1.connect([myChart2]);
myChart2.connect([myChart1]);
}
);
</script>
</body>
需求基本上实现了，匆忙中需求7还没搞出来😭，看看哪位上神可以 帮忙实现？快来放大招吧。
网友评论