ECharts 折线打点
2018-05-15 本文已影响145人
一个冬季
代码参考网址：http://gallery.echartsjs.com/editor.html?c=xHkc5AfuRM&comment=0
上面这个是原来作者写的，我感觉写的还可以，然后我自己借鉴了他的来做了修改，效果图如下：
折线打点.gif
代码如下：末尾处我会贴出GitHub地址
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
#demo {
margin-top: 100px;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/echarts.min.js"></script>
<script type="text/javascript" src="../script/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="../script/testData.js"></script>
<script type="text/javascript">
$(function () {
initLinexChart(data.salesQtyPart);
});
/**
* @date:2018/5/4 13:44
* 作者:GaoXiaoXiong
* 功能: 初始化折线图
* @salesQtyPartList 集合参数
*/
function initLinexChart(salesQtyPartList) {
var listValue00 = [], listValue01 = [], listValue02 = [];
var zheYearList = [], zhuYearList = [], totalYearList = [];//年份
var isFirat = false;
//从集合中取出value数据集
for (var i = 0; i < salesQtyPartList.length; i++) {
var sale = salesQtyPartList[i];
for (var j = 0; j < sale.data.length; j++) {
if (j == 0) {
listValue00.push(sale.data[j].value);
} else if (j == 1) {
listValue01.push(sale.data[j].value);
} else {
listValue02.push(sale.data[j].value);
}
if (!isFirat) {//填写年份
if (j == sale.data.length - 1) {
isFirat = true;
}
zheYearList.push(sale.data[j].year + "折线图");
zhuYearList.push(sale.data[j].year + "柱状图");
}
}
}
for (var i = 0; i < zheYearList.length; i++) {
totalYearList.push(zheYearList[i]);
}
for (var i = 0; i < zhuYearList.length; i++) {
totalYearList.push(zhuYearList[i]);
}
var filterVlues='';
var dom = document.getElementById("demo");
var myChart = echarts.init(dom);
var app = {};
var option = null;
option = {
tooltip: {//提示框组件
trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。只有设置了这个参数才会出现竖直的线条
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' //指示器类型。
},
formatter: function (params) {//提示框自定义
filterVlues = params;//这里是获取到过滤完后的值
return formatterTip(params);
},
},
toolbox: {
show: false,
},
legend: {//这里定义了折线图上面那2排的颜色，显示的样子
data: totalYearList,
textStyle: {
color: "#92DCFB",
}
},
color: [//定义了线条，柱状图的颜色，颜色值的顺序你要跟你上面的totalYearList存储的顺序要一直
"#E9B943", "#BA674E", "#CD3E29",
"#205397", "#479AE6", "#57C3FB"
],
grid: {//定义折线图距离左边多少右边多少上边多少的距离
left: '3%',
right: '4%',
bottom: '3%',
top: '30%',
containLabel: true //grid 区域是否包含坐标轴的刻度标签。如果不写true，那么纵坐标的位置就不会算进上面设置的坐边右边上边下边里面去
},
xAxis: [//定义X轴
{
type: 'category',//设置X轴的类型
name: '月',
axisLabel: {//坐标轴刻度标签的相关设置。
color: "#92DCFB",//设置颜色
fontSize: '12',//字体大小
interval: 1,//设置每个相邻之间少1个数
rotate: 0,//刻度标签旋转的角度
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']//数据源
}
],
yAxis: [//定义y轴
{
type: 'value',
name: '吨',
axisLabel: {//坐标轴刻度标签的相关设置。
color: "#92DCFB",
fontSize: '14',
interval: 0,
},
axisLine: {//坐标轴颜色
lineStyle: {//坐标轴颜色
color: "#92DCFB",
},
},
},
],
series: [//系列列表。每个系列通过 type 决定自己的图表类型
{
name: zheYearList[0],//数据项名称。如果不写这个那么上面的2排里面就会少一个
type: 'line',//设置为折线图
data: listValue00,
showAllSymbol: true,//示折线图上所有小标签
symbolSize: 5,//标记的大小
markLine: { // 设置警戒线（图表标线）
silent: true, // 图形是否不响应和触发鼠标事件
lineStyle: {
normal: {
type: 'solid'
}
},
data: [],
}
},
{
name: zheYearList[1],//数据项名称。
type: 'line',
data: listValue01,
showAllSymbol: true,//示折线图上所有小标签
symbolSize: 5,//标记的大小
markLine: { // 设置警戒线（图表标线）
silent: true, // 图形是否不响应和触发鼠标事件
lineStyle: {
normal: {
type: 'solid'
}
},
data: [],
}
},
{
name: zheYearList[2],//数据项名称。
type: 'line',
data: listValue02,
showAllSymbol: true,//示折线图上所有小标签
symbolSize: 5,//标记的大小
markLine: { // 设置警戒线（图表标线）
silent: true, // 图形是否不响应和触发鼠标事件
lineStyle: {
normal: {
type: 'solid'
}
},
data: [],
}
},
{
name: zhuYearList[0],
type: 'bar',//设置为柱状图
data: listValue00,
tooltip: {
formatter: function (datas) {
return "";
}
}
},
{
name: zhuYearList[1],
type: 'bar',
data: listValue01,
},
{
name: zhuYearList[2],
type: 'bar',
data: listValue02,
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//设置点击事件
myChart.on('click', function (param) {
var choseIndex = param.seriesIndex;
var dataSource=[];
var dataIndex = param.dataIndex;//当前点击的是哪一个标签
var xAxisValue = option.xAxis[0].data[dataIndex];//横坐标的值
var showValue="";
for(var i=0;i<filterVlues.length;i++){//从刚刚过滤文件那里获取到的值进行遍历
showValue+='\n'+filterVlues[i].seriesName+':'+filterVlues[i].value;
}
//#BA674E
var obj = {
type: 'average',//用于标注最大值最小值等,'average' 平均值。
xAxis: xAxisValue, // 设定显示X轴出现见箭头
label: {
normal: {
formatter: showValue,//定义要显示的样式
position: 'middle', //设置线的中点。位置显示
}
}
}
dataSource.push(obj);
option.series[0].markLine.data = dataSource;//标线的数据数组
myChart.setOption(option);
});
}
/**
* @date:2018/5/9 17:38
* 作者:GaoXiaoXiong
* 功能: 控制提示框的样式
*/
function formatterTip(params) {
//移除重复的数据
for (var i = 0; i < params.length; i++) {
for (var j = params.length - 1; j > i; j--) {
if (params[j].data == params[i].data) {
params.splice(j, 1);
break;
}
}
}
var tip = '';
for (var i = 0; i < params.length; i++) {//这里是自己定义样式， params[i].marker 表示是否显示左边的那个小圆圈
if (params[i].value != 0) {
tip = tip + params[i].marker + params[i].seriesName.substring(0, 4) + '年' + ':' + params[i].value + '<br/>';
}
}
return tip;
}
</script>
</html>
有些地方我还是想说明下
filterVlues：是我自己定义的参数，最后得到的filterVlues值是过滤后的。
myChart.on('click', function (param)：是设置你点击的哪个，param里面含有你当前点击的各种值。
option.series[0].markLine.data = dataSource：这里我是获取第0个，也就是上图里面的黄色，如果你想设置第一个那么你把0->1这样一改就行了。
markLine：这个参数要在series[....]里面设置，如果你不这样设置那么就会报错，找不到markLine这样的错误。
