现在就是这个js文件已经可以实现画表格功能了，但是老板要求把整体封装成一个函数，然后返回这个option
相当于输入一串数据，通过函数输出 图表。 即如何将JS 文件替换为一个函数调用
HTML文件
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="C:\Users\ming\Desktop\echarts.common.min.js"></script>
</header>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var temp = [{"text":"zmx"},{"y1":"ml"},{"y2":"kg"},{"name1":"hello"},{"name2":"world"}]
var data1=[{X:"1",Y:"0"},{X:"2",Y:"20"},{X:"3",Y:"40"},{X:"4",Y:"60"},{X:"1",Y:"80"},{X:"1",Y:"100"}]
var data2=[{X:"1",Y:"10"},{X:"1",Y:"20"},{X:"1",Y:"30"},{X:"1",Y:"50"},{X:"1",Y:"70"},{X:"1",Y:"90"}]
</script>
<script type="text/javascript" src=C:\Users\ming\Desktop\新建文件夹\1111.js></script>
<script>
var option=function(){
var this.title= temp[0].text;
}
console.log(option.title);
</script>
</body>
</html>js文件
var converX = function (data) {
var res = [];
for (var i = 0; i< data.length; i++){
res.push(data[i].X)
}
return res;
}
var converY = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
res.push(data[i].Y);
}
return res;
};
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: temp[0].text //0
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['位置2','位置3']
},
xAxis: {
data: converX(data1),
},
yAxis: [
{
type: 'value',
name: temp[1].y1,
},
{
type: 'value',
name: temp[2].y2,
}
],
series: [
{
name:temp[3].name1,
type:'bar',
data:converY(data1),
},
{
name:temp[4].name2,
type:'line',
yAxisIndex: 1,
data:converY(data2),
}
]
};
myChart.setOption(option);把option的构建单独写在一个函数里，var option = createOption(): 调的时候构建好并return这个option，适用于图多的时候，这样的程序比较灵活，易维护，可以减少大量的重复性代码，给你老板点个赞。