ECharts实例

ECharts是一款由百度前端技术部开发的，基于JavaScript的数据可视化图标库，提供直观，生动，可交互，可个性定制的数据可视化图表。

例子：

1、首先引入JS脚本

2、  <div id="main" style="width:600px;height:500px; padding-left:80px;"></div> 

        //这里必须设置div的宽度，否则不会显示。

 3、 $.ajax({

            url: "/FR/Home/GetKCCL",
            type: "post",
            dataType: "json",
            success: function (data) {
                var maxdata = 0;
                var kccl = [];
                $.each(data, function (i, item) {
                    kccl.push({ name: item.name, value: parseFloat(item.value / 10000).toFixed(2) });
                    if (item.value > maxdata)
                        maxdata = item.value;
                });

               //基于准备好的dom,初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                option = {
                    title: {
                        show: false,
                        text: '全国煤炭可采储量',
                        left: 'center'
                    },
                    tooltip: {  //提示框，鼠标悬浮交互时的信息提示
                        trigger: 'item' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 默认值'item'
                    },
                    legend: {//图例，每个图表最多仅有一个图例，混搭图表共享
                        show: false,//显示策略，可选为：true（显示） | false（隐藏）
                        orient: 'horizontal',
                        x: 'center',
                        data: '全国煤炭可采储量'
                    },
                    dataRange: {//值域选择,值域范围
                        show: true,
                        min: 0,//指定的最小值
                        max: parseInt(Math.ceil(maxdata / 10000)),
                        x: 'left',
                        y: 'bottom',
                        text: ['高', '低(亿吨)'],           // 文本，默认为数值文本
                        calculable: true //是否启用值域漫游
                    },
                    toolbox: { //工具箱，每个图表最多仅有一个工具箱
                        show: true,
                        orient: 'vertical',
                        x: 'right',
                        y: 'top',
                        feature: {
                            mark: { show: false },
                            dataView: { show: false, readOnly: false },
                            restore: { show: false },
                            saveAsImage: { show: true }
                        }
                    },
                    roamController: {  //漫游缩放组件
                        show: false,
                        x: 'right',
                        mapTypeControl: {
                            'china': true
                        }
                    },
                    series: [
                        {
                            name: '全国煤炭可采储量',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            itemStyle: {
                                normal: { label: { show: true } },
                                emphasis: { label: { show: true } }
                            },
                            data: kccl
                        }
                    ]
                };

              //使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

               //动态切换主题(主题是要有js文件的)
                myChart.setTheme("blue");
            }
        });