标签：代码 series ...... 练习 var push 数据 ECharts
由于工作中要用到基于ECharts的大屏可视化数据展示，下方为自己先用静态数据进行的可视化效果图一角，逐步完善中......，后续会基于Python的Flask框架以及ajax传输数据，包括筛选各种条件后的数据对图形进行异步无刷新改变。。。。。。
嘻嘻，2年没有敲代码了，部分代码有进行算法练习，勿见怪哦......
效果图一角：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data = [
['x轴', '60px','101npx','178xpx','289ypx'],
['西南航空', 60,101,178,289],
['国泰航空', 120,180,190,303],
['东方航空', 90,92,97,103]
]
console.log("我是源数据1data=====》",data)
/***
* @注意
* @以下纯属练习处理数据（原因2年没敲代码了，练习下，嘻嘻）
*/
var newAarry = []
for(var i=0;i<data.length;i++){
if(i!=0){
newAarry.push(data[i][0])
}
}
console.log("我是图例=====》",newAarry) //打印结果是 ['西南航空', '国泰航空', '东方航空']
var newData = []
console.log("我是源数据2data=====》",data)
for(var j=0;j<data.length;j++){
var news = data[j].slice(1)
//console.log("我是循环中的数据news=====》",news)
newData.push(news)
}
console.log("我是处理后的数据newData=====》",newData)
/***
* @注意
* @以下是有用数据，上方数据处理纯属练习处理数据（原因2年没敲代码了，练习下，嘻嘻）
*/
//循环往series里push数据
var series1 = []
var countMax = 0
for(var key in data){
console.log(data[key])
if(key!=0){
//去除第一行
series1.push(
{
name:data[key][0],//图例
type:'line',//折线 bar 饼状
data:data[key].splice(1)
}
)
}
countMax++;
}
console.log("我是动态的series=====》",series1)
// 指定图表的配置项和数据
var option = {
title:{text:'我是折线图'},
//图例
legend: {
orient:'vertical',
x:'right',
y:'center',
itemGap:25,
},
tooltip: {},
//dataset:{ source:newData},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {
type: 'category',
data: data[0].slice(1) //将x轴设定为对象数据第一列（去除第一个元素）
},
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: series1
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
当然了，工作中的数据比这个复杂多了，这只是第一步已经完成了，going......
标签：代码,series,......,练习,var,push,数据,ECharts 来源： https://www.cnblogs.com/zmdComeOn/p/15914377.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。