写一个echarts的小例子
程序员文章站
2022-06-30 09:14:42
...
一个echarts的小例子
首先要在echarts官网上找一个图
之后要改成
第一步 提供一个容器
<div id="main" style="width: 350px;height:300px;">
<script src="../static/Echarts1.js"></script>
</div>
第二步 建立一个js文件,我这个文件建立在src那个目录下
Echarts1.js
var chartData; //声明全局变量利用ajax赋值,方便给option赋值
//利用ajax方法获取数据
$.ajax({
url:"/cx",
async:false, //ajax请求是同步还是异步,默认是异步,如果设置为同步,该方法必须是得到响应值做完响应的处理才会往下面执行
success:function(data){
chartData=eval(data);
}
});
使用jquery的ajax 去调取数据
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '统计报表'
},
tooltip: {},
// legend: {
// data:['销量']
// },
xAxis: {
data: ["累计确诊","累计治愈","*输入","累计死亡"]
},
yAxis: {},
series: [{
name: '人数',
type: 'bar',
data: [chartData.lj_Diag.toString(),chartData.lj_cure.toString(),chartData.jwsr.toString(),chartData.dead.toString()]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
把数据塞到data[ ] 里面就行