欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

写一个echarts的小例子

程序员文章站 2022-06-30 09:14:42
...

一个echarts的小例子

首先要在echarts官网上找一个图
写一个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 去调取数据
写一个echarts的小例子

 // 基于准备好的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[ ] 里面就行