Echarts动态生成图标

最新推荐文章于 2025-02-25 16:14:15 发布

446954852

最新推荐文章于 2025-02-25 16:14:15 发布

阅读量1.8k

点赞数

分类专栏： html&css js

本文链接：https://blog.csdn.net/u014476019/article/details/51193677

版权

js 同时被 2 个专栏收录

7 篇文章

订阅专栏

html&css

1 篇文章

订阅专栏

本文介绍了如何利用Echarts库动态生成各种图表，包括数据的更新和交互功能，实现数据可视化的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入js文件----echart.js
2.根据year软动态生成图标
function chartExport(year)

// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});

// 使用
require(
[
'echarts',
'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main2'));//页面上的div <div id="main2" class="box-body table-responsive chart-view">
var dataJson = {"KMDriver":[0,0,0,0,0,0,0,0,0,0,0,0],"MVAF":[0,0,0,0,0,0,0,0,0,0,0,0],"MVAFtarger":[0,0,0,0,0,0,0,0,0,0,0,0]};
var MVAFtarget;
//根据入参year动态请求数据
syncData("/weekly/getstatmonthly/" + year,"GET","",function(success,data){
if(success){
console.info(data);
console.info(JSON.stringify(data));
if(data != undefined){
$.each(data, function(i, ele){
dataJson["KMDriver"][ele.month1 - 1] = ele.KMDriver;
dataJson["MVAF"][ele.month1 - 1] = ele.MVAF;
MVAFtarget = ele.MVAFtarget;
});

}
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['KM Driver','MVAF','MVAF targer']
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['1','2','3','4','5','6','7','8','9','10','11','12']
}
],
yAxis : [//此处为数组即会有两个y轴
{
type : 'value'
}
,
{
type : 'value'
}
],
series : [
{
name:'KM Driver',
type:'line',
data:dataJson["KMDriver"]
},
{
name:'MVAF targer',
type:'line',
yAxisIndex: 1,//默认的是在第一个y抽,此处指定对应数据为第二个y轴
data:dataJson["MVAFtarger"]
}
,
{
name:'MVAF',
type:'line',
yAxisIndex: 1,
data:dataJson["MVAF"]
}

]
};
// 为echarts对象加载数据
myChart.setOption(option);
} else {
failureAlert(data.message);
}
});
}
);
}

3.效果