Echarts的使用

我想大多数人都知道“Echarts”  百度图说，

如果你不知道的话，http://echarts.baidu.com/index.html；点击进入，会让你收获满满的；

这里，我不去再举例说明了，因为，你下载的文档，已经够详细的，这里，我提几点，我在用Echarts时候，遇到小挫折:

1.如何去加载你的后台数据：

我用到两种实现：

一：利用ajax去异步请求你的数据，大家不妨把option里面参数，当作是类的属性；（后面的代码会看到）

二：在后台把你的参数拼成字符串，当然，这里，需要注意参数的格式，我想，你看到demo的时候，你就会很清楚，按照它的样子去拼吧；

2.圆饼图，这是我必须要说的：

这里加上参数 9（32.14%），都是itemStyle惹得祸；

 series: [
                {
                    name: '告警来源',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '46%'],
                    data: [
                        { value: [], name: '云应用离线' },
                    ],
                    //饼图的显示值：（看这里）
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} : {c} ({d}%)'
                            },
                            labelLine: { show: true }
                        }
                    }
                }
            ]

颜色的话：

 //color: ['#00448a', '#0580b9', '#28c6b9', '#84e6f1', '#dddddd', '#dddddd', '#dddddd', '#dddddd'],  //设置颜色

这里，我贴上一段代码，希望对初学者有用：

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

<script type="text/javascript">
    var ramechart;
    var cpuechart;
    var diskechart;
    //var diskusedechart;
    $(function () {


        load();
});




function load() {
        // Step:3 conifg ECharts's path, link to echarts.js from current page.
        // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
        require.config({
            paths: {
                echarts: '../Scripts/Echartsjs'
            }
        });

        // Step:4 require echarts and use it in the callback.
        // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
        require(
            [
                'echarts',
                //'echarts/chart/bar'
                'echarts/chart/line'
                //'echarts/chart/gauge'
            ],
            DrawEchart
    );
    }

    function DrawEchart(ec) {
        var vmid = '@vmID';

        //--- 折柱 ---
        ramechart = ec.init(document.getElementById('RamDiv'));
        cpuechart = ec.init(document.getElementById('CpuDiv'));
        diskechart = ec.init(document.getElementById('DiskDiv'));
        //diskusedechart = ec.init(document.getElementById('DiskUsedDiv'));
        //图表显示提示信息
        ramechart.showLoading({
            text: "图表数据正在努力加载..."
        });
        cpuechart.showLoading({
            text: "图表数据正在努力加载..."
        });
        diskechart.showLoading({
            text: "图表数据正在努力加载..."
        });
        //diskusedechart.showLoading({
        //    text: "图表数据正在努力加载..."
        //});
        //ram图表
        var ramoptions = {
            labels: {
                style: {
                    fontSize: '14px'
                }
            },
            legend: {
                data: []
            },          
                toolbox: {
            show: false,
            feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
            },
                        },
            tooltip: {
                trigger: 'axis',
                //formatter: '{b}<br/>{a0}:{c0}<br/>{a1}:{c1}'
            },
            grid: {
                x: 55,
                y: 15,
                x2: 25,
                y2: 35
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    splitLine: {
                        show: false
                    }//分隔线
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    //axisLine:
                    splitArea: { show: false },//分隔区域
                    splitNumber:10,
                    //tickInterval: 1 //坐标轴刻度值为1
                    axisLabel: {
                        formatter: '{value} %'
                    }
                }
            ],
            series: [
                            {
                                name: '内存使用百分比',
                                type: 'line',
                                itemStyle: { normal: { color: '#1be09e' } },//图形样式，可设置图表内图形的默认样式和强调样式
                                data: []
                            }
            ]
        };


        //cpu
        var cpuoptions = {
            labels: {
                style: {
                    fontSize: '14px'
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                },
            },
            tooltip: {
                trigger: 'axis',
                //formatter: '{b}<br/>{a0}:{c0}<br/>{a1}:{c1}'
            },
            grid: {
                x: 55,
                y: 15,
                x2: 25,
                y2: 35
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    splitLine: {
                        show: false
                    }//分隔线
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    //axisLine:
                    splitNumber: 10,
                    splitArea: { show: false },//分隔区域
                    //tickInterval: 1 //坐标轴刻度值为1
                    axisLabel : {
                formatter: '{value} %'
            }
                }
            ],
            series: [
                            {
                                name: '处理器使用百分比',
                                type: 'line',
                                itemStyle: { normal: { color: '#7030a0' } },//图形样式，可设置图表内图形的默认样式和强调样式
                                data: []
                            }
            ]
        };

        //disk
        var diskoptions = {
            labels: {
                style: {
                    fontSize: '14px'
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                show: false,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                },
            },
            tooltip: {
                trigger: 'axis',
                //formatter: '{b}<br/>{a0}:{c0}<br/>{a1}:{c1}'
            },
            grid: {
                x: 75,
                y: 15,
                x2: 25,
                y2: 35
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    splitLine: {
                        show: false
                    }//分隔线
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    min: 0,
                    //max: 5,
                    //axisLine:
                    splitNumber: 10,
                    splitArea: { show: false },//分隔区域
                    //tickInterval: 1 //坐标轴刻度值为1
                   
                }
            ],
            series: [
                            {
                                name: 'read',
                                type: 'line',
                                itemStyle: { normal: { color: '#4783ce' } },//图形样式，可设置图表内图形的默认样式和强调样式
                                data: []
                            },
                            {
                                name: 'write',
                                type: 'line',
                                itemStyle: { normal: { color: '#d29a3c' } },
                                data: []
                            }
            ]
        };


        //通过Ajax获取数据
        $.ajax({
            type: "post",
            async: false, //同步执行
            url: "/VirtualMachine/ajaxPerformanceInfo",
            dataType: "json", //返回数据形式为json
            data: { VMId:vmid, rnd: Math.random() },
            success: function (result) {
                if (result) {
                    //将返回的category和series对象赋值给options对象内的category和series
                    //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                    ramoptions.xAxis[0].data = result.xAxis;
                    ramoptions.series[0].data = result.ram;
                    ramechart.hideLoading();
                    ramechart.setOption(ramoptions);

                    cpuoptions.xAxis[0].data = result.xAxis;
                    cpuoptions.series[0].data = result.cpu;
                    cpuechart.hideLoading();
                    cpuechart.setOption(cpuoptions);

                    diskoptions.xAxis[0].data = result.xAxis;
                    diskoptions.series[0].data = result.write;
                    diskoptions.series[1].data = result.read;
                    diskechart.hideLoading();
                    diskechart.setOption(diskoptions);

                    //diskuseroptions.series[0].data[0].value = result.DiskUsed;
                    //diskusedechart.hideLoading();
                    //diskusedechart.setOption(diskuseroptions);

                    $("#rammin").text("最小值" + result.Rammin + "%");
                    $("#rammax").text("最大值" + result.Rammax + "%");
                    $("#ramevg").text("平均值" + result.Ramevg + "%");

                    $("#cpumin").text("最小值" + result.Cpumin + "%");
                    $("#cpumax").text("最大值" + result.Cpumax + "%");
                    $("#cpuevg").text("平均值" + result.Cpuevg + "%");

                }
            },
            error: function (errorMsg) {
                alert("图表请求数据失败啦! ");
            }
        });


    }