ECharts动态加载数据绘制折线图

最新推荐文章于 2025-03-20 17:40:51 发布

Gloria。

最新推荐文章于 2025-03-20 17:40:51 发布

阅读量4.2w

点赞数 17

分类专栏： javascript与jquery 文章标签： ECharts javascript jquery html 折线图

本文链接：https://blog.csdn.net/weixin_44410921/article/details/87712135

版权

javascript与jquery 专栏收录该内容

10 篇文章

订阅专栏

Echarts动态加载数据绘制折线图

ECharts
引入ECharts
步骤
连接数据接口，动态加载图表
动态加载数据，整体代码
折线图绘制
总结
- 绘制多个图表的方法

ECharts

纯Javascript的图表库，支持各种图表的绘制。
下载ECharts.js

引入ECharts

1.标签式单文件引入

<body>
    <div id="main" style="height:400px;"></div>
    //图表位置
    <script src="./js/echarts-all.js"></script>
    // 引入js文件
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = { }
        myChart.setOption(option);
    </script>
</body>

（这是较为简洁的使用方法）
2.模块化引入文件

<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    ...
                }
                myChart.setOption(option);
            }
        );
    </script>
</body>

步骤

1.为 ECharts 准备一个具备大小（宽高）的 DOM 。
定义一个待用的div，指定宽度、高度，设置id

 <div id="main" style="height:400px;"></div>

2.引入echarts.js并加载

 <script src="./js/echarts.js"></script>

3.基于准备好的dom，初始化echarts实例

 var myChart = echarts.init(document.getElementById('main'));

4.指定图表的配置项和数据

 // 定义样式和数据
 
        var option = {
           
              title: { //图表标题，可以通过show:true/false控制显示与否，subtext:'二级标题',
                text: ''
            },
            backgroundColor: '#FFFFFF',
            
            tooltip : {//鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置
                trigger: 'axis'
            },
            legend: {// 图例，每条折线或者项对应的示例
                data:[]
            },
            calculable : true,
            xAxis : [
                {
                    axisLabel:{
                        rotate: 30,
                        interval:0
                    },
                    axisLine:{
                        lineStyle :{
                            color: '#CCCCCC'
                        }
                    },
                    type : 'category',
                    boundaryGap : false,//从0刻度开始
                    // data:[]  X轴的定义
                    data : function (){
                        var list = [];
                        for (var i = 10; i <= 18; i++) {
                            if(i<= 12){
                                list.push('2016-'+i + '-01');
                            }else{
                                list.push('2017-'+(i-12) + '-01');
                            }
                        }
                        return list;
                    }()
                }
            ],
            yAxis : [
                {

                    type : 'value',
                    axisLine:{
                        lineStyle :{
                            color: '#CCCCCC'
                        }
                    }
                }
            ],
            series : [
                {
                    name:'新增用户',
                    type:'line',
                    // symbol:'none',//原点
                    smooth: 0.2,//弧度
                    color:['#66AEDE'],
                    // data:Y轴数据
                    data:[500,100,200,400,600,150,750,800,400,250,650,350]
                },
            ]
        };

5.使用刚指定的配置项和数据显示图表

myChart.setOption(option);

连接数据接口，动态加载图表

使用ajax请求数据接口，获取图表数据，重新加载图表

$.ajax({
            url:"user/userIncreaseList",
            type:'get',
            dataType:'json'
            success:function(jsons){
                var Item = function(){
                    return {
                        name:'',
                        type:'line',
                        // itemStyle: {normal: {areaStyle: {type: 'default'}}},这为线条设置
                        label: {normal: {position: 'top'}},
                        markLine: {data: [{type: 'average', name: '平均值'}]},
                        data:[]
                    }
                };// series中的每一项为一个item,所有的属性均可以在此处定义
                var legends = [];// 准备存放图例数据
                var Series = []; // 准备存放图表数据
                var json = jsons.data;// 后台返回的json
                for(var i=0;i < json.length;i++){
                    var it = new Item();
                    it.name = json[i].name;// 先将每一项填充数据
                    legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中
                    it.data = json[i].data;
                    Series.push(it);// 将item放在series中
                }

                // option.series.data=jsons.
                option.xAxis[0].data = jsons.xcontent;// 设置X轴数据了
                // 折线图可设置上下两个X轴，必须是option.xAxis[0].data = json.xcontent
                option.legend.data = legends;// 设置图例
                option.series = Series; // 设置图表
                myChart.setOption(option);// 重新加载图表
            },
            error:function(){
                alert("数据加载失败！请检查数据链接是否正确");
            }
        });

动态加载数据，整体代码

<body>
    <div id="main" style="height:400px;"></div>
    <script src="./js/echarts-all.js"></script>
    // 引入js文件
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        
        //根据需求进行相应的设置
        var option = {
           
              title: { //图表标题，可以通过show:true/false控制显示与否，subtext:'二级标题',
                text: ''
            },
            backgroundColor: '#FFFFFF',
            tooltip : {//鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置
                trigger: 'axis'
            },
            legend: {// 图例，每条折线或者项对应的示例
                data:[]
            },
            calculable : true,
            xAxis : [ ],
            yAxis : [ ],
            series : [  ]
        };


$.ajax({
            url:"user/userIncreaseList",
            type:'get',
            dataType:'json'
            success:function(jsons){
                var Item = function(){
                    return {
                        name:'',
                        type:'line',
                        // itemStyle: {normal: {areaStyle: {type: 'default'}}},这为线条设置
                        label: {normal: {position: 'top'}},
                        markLine: {data: [{type: 'average', name: '平均值'}]},
                        data:[]
                    }
                };// series中的每一项为一个item,所有的属性均可以在此处定义
                var legends = [];// 准备存放图例数据
                var Series = []; // 准备存放图表数据
                var json = jsons.data;// 后台返回的json
                for(var i=0;i < json.length;i++){
                    var it = new Item();
                    it.name = json[i].name;// 先将每一项填充数据
                    legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中
                    it.data = json[i].data;
                    Series.push(it);// 将item放在series中
                }

                // option.series.data=jsons.
                option.xAxis[0].data = jsons.xcontent;// 设置X轴数据了
                // 折线图可设置上下两个X轴，必须是option.xAxis[0].data = json.xcontent
                option.legend.data = legends;// 设置图例
                option.series = Series; // 设置图表
                myChart.setOption(option);// 重新加载图表
            },
            error:function(){
                alert("数据加载失败！请检查数据链接是否正确");
            }
        });


       // 初次加载图表
        myChart.setOption(option);
    </script>
</body>