您的位置：首页 > 其它

Echarts折线图炫酷实现y轴自定义色阶

2017-11-25 11:14 357 查看

介于上一次本菜鸟的代码过low,现在更新，可能还是low,望见谅

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
background-color: gray;
}

#myChart {
width: 80%;
height: 70%;
position: fixed;
top: 15%;
left: 10%;
}
</style>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="echarts3.2.2/echarts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
var myColor = ['#45fda5', '#3ffd55', '#11da01', '#118b43', '#c3eb18',
'#dfde14', '#eac736', '#ed5501', '#9d0700', '#e80c00'
];

var option = {
backgroundColor: 'black',
grid: {
top: 15,
left: 15,
right: 15,
bottom: 15,
containLabel: true //轴上的数值
},
xAxis: {
type: 'category',
splitLine: false,
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
color: myColor[0]
}
},
axisTick: {
lineStyle: {
color: myColor[0]
}
},
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
},
yAxis: {
type: 'value',
min: 0,
splitLine: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
interval: 10,
axisLabel: {
formatter: function (value) {
return value + " 个  -";
},
textStyle: {
color: function (value) {
//注意：当值大于999(三位)时，会以“1,0000”形式，所以要做以下处理
value = parseInt(value.replace(/,/g, ""));
var idx = parseInt(value / 10);

ad2f
return myColor[idx > 9 ? 9 : idx];
}
}
}
},
visualMap: {
show: false,
calculable: true,
min: 0,
max: 100,
inRange: {
color: [myColor[0], myColor[1], myColor[2], myColor[3], myColor[4], myColor[5], myColor[6], myColor[7], myColor[8], myColor[9]]
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
textStyle: {
color: "white"
}
}
}
},
series: [{
name: '人',
type: 'line',
symbol: 'none', //这句就是去掉折线上的点的
smooth: true, //这句就是让曲线变平滑的
hoverAnimation: true,
lineStyle: {
normal: {
width: 5
}
},
itemStyle: {
normal: {
opacity: 0
}
},
data: [54, 86, 46, 45, 77, 96, 89, 88, 23, 38,
3, 66, 98, 43, 73, 76, 44, 16, 21, 14,
71, 8, 61, 65, 1, 68, 33, 69, 49, 24
]
}]
};

var myChart = echarts.init($("#myChart").get(0));//get()方法作用：将jQuery对象转Dom对象
myChart.setOption(option);
});
</script>
</head>
<body>
<div id="myChart"></div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Echarts折线图 炫酷实现y轴自定义色阶

Echarts折线图炫酷实现y轴自定义色阶