最简单的ECharts（dome） 前端动态改变数据
很简单 直接上代码！！！！！！
复制直接使用
最简单的Eacharts（dome）
想改变里边的样式，直接复制网址里边的option，再改变里边的option就可以了！
官网: https://www.echartsjs.com/examples/zh/index.html.
例：lhttps://www.echartsjs.com/examples/zh/editor.html?c=line-simple.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line',//需要折线图则加载line模块
],
function (ec) {
// 初始化echarts图表
var myChart = ec.init(document.getElementById('main'), 'light');
option = {
//x轴
xAxis: [
{
data: ['西', '安', '工', '业', '大', '学']
}
],
//y轴
yAxis: [
{
name: '得分'
}
],
series: [
{
type: 'line',
data: ['11', '12', '3', '14', '15', '6', '17']
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</head>
<body>
<div id="main" style="height: 600px;width:60% ;margin-left: 21%;margin-top: 1%;"></div>
</body>
</html>
效果：
带选择时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
query(0)
function query(value) {
var xData = [];
var yData = [];
if(value == 0){
xData = ['西', '安', '工', '业', '大', '学'];
yData = ['11', '12', '3', '14', '15', '6', '17'];
} else if( value == 1){
xData = ['西1', '安1', '工1', '业1', '大1', '学1'];
yData = ['1', '2', '7', '9', '3', '4', '2'];
} else if( value == 2){
xData = ['西2', '安2', '工2', '业2', '大2', '学2'];
yData = ['10', '2', '3', '7', '1', '16', '9'];
} else if( value == 3){
xData = ['西3', '安3', '工3', '业3', '大3', '学3'];
yData = ['1', '2', '9', '7', '1', '16', '10'];
}
addData(xData,yData);
}
function addData(xData,yData){
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line',//需要折线图则加载line模块
],
function (ec) {
// 初始化echarts图表
var myChart = ec.init(document.getElementById('main'), 'light');
option = {
//x轴
xAxis: [
{
data: xData
}
],
//y轴
yAxis: [
{
name: '得分'
}
],
series: [
{
type: 'line',
data: yData
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
}
</script>
</head>
<body>
<select name="" onchange="query(this.value)">
<option value="0">2017年</option>
<option value="1">2018年</option>
<option value="2">2019年</option>
<option value="3">2020年</option>
</select>
<div id="main" style="height: 600px;width:60% ;margin-left: 21%;margin-top: 1%;"></div>
</body>
</html>