ECharts使⽤—折线图动态加载
最近需求中⽤到折线图，单线条，多线交错，之前是散点图，⽤的是另⼀个 amcharts.js，这个⽂档也能的到，回归早本次重点：ECharts ⼀、⾸先引⼊echartsmon.min.js⽂件，当然开发状态下使⽤echarts.js可以更便于调试，
⼆、为图表准备⼀个dom容器，宽⾼可以⾃⾏定义，
<body>
<!-- 为 ECharts 准备⼀个具备⼤⼩（宽⾼）的 DOM -->
<div id="main" ></div>
</body>
三、使⽤⽅法初始化⼀个echart是实例，并通过setOption⽅法⽣成⼀个简单的折线图，如下：
// 1 单独⼀个
var myChart = echarts.ElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: { //跟随⿏标显⽰数值
trigger: 'axis'
},
//保存图⽚
toolbox: {
feature: {
saveAsImage: {
name:'热度监控', //图⽚名
pixelRatio:2
}
}
},
/* grid: {  //canvas距离边界位置
left: '3%',
bottom:'25%'
},*/
// 声明⼀个 X 轴，类⽬轴（category）。默认情况下，类⽬轴对应到 dataset 第⼀列。
xAxis: {
type: 'category',
boundaryGap: false,//坐标轴不留⽩
data: dataX.slice(0,10),
axisLabel: { //x坐标展⽰偏移
interval:0,
rotate:60
},
/* axisLabel: { //刻度偏移
interval: 0,
rotate:0,
fontWeight:'400',
formatter:function(value)
{
return value.split("").join("\n");
}
},
axisTick:{  //隔⼏个空格显⽰刻度
interval:1,
}*/
},
// 声明⼀个 Y 轴，数值轴。
yAxis: {
type: 'value'
},
/
/ 声明多个 bar 系列，默认情况下，每个系列会⾃动对应到 dataset 的每⼀列。
series: [{
data: [820, 932, 901, 934, 932, 901, 934],
type: 'line'
}]
};
// 使⽤刚指定的配置项和数据显⽰图表。
myChart.setOption(option);
其中部分属性都附上了注释，实际中会常⽤的是saveAsImage，⽤于图⽚的保存，
三、对于多个折线，跟上⾯的⽅法⼤同⼩异，区别于声明图例组件legend和系列列表赋值，demo如下：
//2 多个折线
/*2*/
var myChart3 = echarts.ElementById('main3'));
var option3 = {
tooltip: {
trigger: 'axis'
},
legend: {
data:['总池','⽤户池','马甲池']
},
toolbox: {
feature: {
saveAsImage: {
name:'奖池监控',
pixelRatio:2
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dataX2,
},
yAxis: {
type: 'value'
},
series: [
{
name:'总池',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'⽤户池',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'马甲池',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
}
]
};
myChart3.setOption(option3);
四、当然我们经常⽤的过程中值是需要动态配置的，⽤setOption给echarts实例动态赋值：/*1先声明*/
var myChart1 = echarts.ElementById('main'));
myChart1.setOption({
legend: {
data:['销量']
},
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
saveAsImage: {
name:'热度监控',
pixelRatio:2
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
data: []
}]
});
/
/ 2异步加载数据
$.get('/admin/js/data1.json').done(function (data) {
// 填⼊数据
myChart1.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: data.dataX2
},
series: [{
name: '销量',
data: data.data1
}]
});
});
具体参数就不在解释，可以参考的说明，⾃⼰尝试⼏下就知道对应的意思了，
五、动态加载的时候，请求需要时间，这个过程中可以显⽰loading动画，也是有提供的，
myChart1.showLoading();
这个⽅法我在声明myChart1，初始化之后直接调⽤，动态配置获得请求后，在调⽤
myChart1.hideLoading();
隐藏动画，举个栗⼦吧：
$.ajax({
type: "get",
url: 'demo.json',
async: true,
dataType: 'json',
success: function(res) {
if(res.status == 1 && res.data){
var data = res.data;
myChart3.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: data.dataX1
},
series: [{
name:'总池',
type:'line',
stack: '总量',
data:data.dataY1
}]
});
}else if(!data){
messager('danger','暂⽆数据')
}else{
messager('danger',res.msg)setoption
}
},
error: function(error) {
messager('danger',error.statusText)
},
complete:function () {
myChart3.hideLoading();
}
});
叨逼叨：这⾥series⾥有参数项stack，多个线条时有⽤，如果设置相同的stack值，后⼀个系列的值会在前⼀个系列的值上相加。当然，这只是冰⼭⼀⾓，只是⾃⼰刚好需要这点⽽已，更多强⼤的功能暂时没有⽤到~~~~  ^_^

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。