<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//cdn.bootcss.com/echarts/3.5.3/echarts.min.js"></script>
<style>
#chart {
width: 600px;
height: 400px;
border: 1px solid red;
margin-bottom: 10px;
}
</style>
<script>
var ChartUtils = {
cdata:[5, 20, 36, 10, 10, 20],
options:{
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: this.cdata
}]
},
init: function (id) {
var el = document.getElementById(id);
this.chart = echarts.init(el);
console.log(this.cdata);
this.chart.setOption(this.options);
},
update:function (data) {
this.cdata = data;
this.chart.setOption(this.options);
}
};
function btn1() {
ChartUtils.init("chart");
}
function btn2() {
ChartUtils.update([1, 2, 3, 4, 5, 6]);
}
</script>
</head>
<body>
<p id="chart"></p>
<button id="btnInit" onclick="btn1()">初始化</button>
<button id="btnUp" onclick="btn2()">更新表</button>
</body>
</html>Look for the correct way to write, initialize and update data methods
Like +1
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...