echart3图表的实际应用与简单示例

来源：互联网发布：怎么在淘宝上捡漏编辑：程序博客网时间：2024/05/21 04:23

echart是百度团队推出的一个纯js的图标库，现在已经到了3.0版本，这个库的综合能力是非常强大的，上手也不困难，目前在我的项目上会用到一些基本的图表，在此记录下来，以便于日后查看。下面是一段js代码，用来展示一个常规的柱状图是如何形成的：

// 指定图表的配置项和数据             function initialize1(date) {                //初始化前先销毁                echarts.dispose(document.getElementById('chart1'));//容器id                var myChart = echarts.init(document.getElementById('chart1'));//容器id                //图表                myChart.showLoading({                    text: "加载中...请等待"                });                $.ajax({                    type: 'POST',                    url: encodeURI(此处为后台数据的获取地址),                    async: true,                    dataType: "json", //返回数据形式为json                      contentType: "application/json; charset=utf-8",                    success: function(result) {                        if (result) {                            //将返回的xAxis和series对象赋值给options对象内的category和series                            var option = {                                title: {                                    text: '图表标题',                                    textStyle: {                                        color: '#666',                                        fontSize: 15                                    }                                },                                tooltip: {},                                legend: {                                    data: result.legend                                },                                xAxis: {                                    data: result.xAxis, //等待赋值                                    axisLabel: {                                        interval: 0, //横轴信息全部显示                                        rotate: 30                                    }                                },                                yAxis: {},                                series: [{                                name: "图例1",                                    type: "bar",                                    data: result.series[0].data,                                    itemStyle:  {                                    normal:     {                                        color: '#1ea7f0'                                                }                                                }                                }, {                                name: "图例2",                                    type: "bar",                                    data: result.series2[0].data,                                    itemStyle:  {                                        normal: {                                        color: '#F48a33'                                                }                                                }                                }]                            };                            myChart.hideLoading();                            myChart.setOption(option);                        }                    },                    error: function(errorMsg) {                        alert("数据加载失败！");                    }                });            }

这段代码展示了如何用ajax获取数据并用echart展示，希望大家看了能有所收获。

阅读全文

0 0