web数据可视化（echarts版）代码3-7

    
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            color: ["red", 'green', 'blue', 'yellow', 'grey', '#FA8072'],  //使用自己预定义的颜色
            tooltip: {  //配置提示框组件
                trigger: 'axis'
            },
            legend: {  //配置图例组件
                x: 300, data: ['最高', '最低']
            },
            toolbox: {  //配置工具箱组件
                show: true,  //设置是否显示工具箱组件
                orient: 'horizontal',  //设置布局方式，默认为水平布局，可选:'horizontal'¦'vertical'
                  //设置水平安放位置，默认为右对齐；
                //可选:'center'¦'left'¦'right'¦{number}（x坐标，单位px）
                x: 'right',
                y: 'top',
                color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
                backgroundColor: 'rgba(0,0,0,0)',  //设置工具箱背景颜色
                borderColor: '#ccc',  //设置工具箱边框颜色
                borderWidth: 0,  //设置工具箱边框线宽，单位px,默认为0（无边框）
                padding: 5,  //设置工具箱内边距，单位px，默认各方向内边距为5
                showTitle: true,
                feature: {
                    mark: {  //设置标记
                        show: true,
                        title: {
                            mark: '辅助线-开关',
                            markUndo: '辅助线-删除',
                            markClear: '辅助线-清空'
                        },
                        lineStyle: { width: 1, color: '#1e90ff', type: 'dashed' }
                    },
                    dataZoom: {  //设置数据区域缩放
                        show: true,
                        title: { dataZoom: '区域缩放', dataZoomReset: '区域缩放-后退' }
                    },
                    dataView: {  //设置数据视图
                        show: true, title: '数据视图',
                        readOnly: false, lang: ['数据视图', '关闭', '刷新'],
                        optionToContent: function (opt) {
                            var axisData = opt.xAxis[0].data;
                            var series = opt.series;
                            var table = '

'
                                + '

'
                                + '

'
                                + '

';
                            for (var i = 0, l = axisData.length; i < l; i++) {
                                table += '

'
                                    + '

'
                                    + '

'
                                    + '

';
                            }
                            table += '

';
                            return table;
                        }
                    },
                    magicType: {  //设置动态类型切换
                        show: true,
                        title: {
                            line: '动态类型切换-折线图',
                            bar: '动态类型切换-柱状图',
                            stack: '动态类型切换-堆积',
                            tiled: '动态类型切换-平铺'
                        },
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    restore: {  //设置数据重置
                        show: true, title: '还原', color: 'black'
                    },
                    saveAsImage: {  //设置导出图片
                        show: true, title: '保存为图片',
                        type: 'jpeg', lang: ['单击本地保存']
                    },
                    myTool: {  //设置自定义工具按钮
                        show: true, title: '自定义扩展方法',
                        //设置改变默认的图标为一个特定的图标
                        icon: "image://../images/girl3.gif",
                        icon: 'image://http://echarts.baidu.com/images/favicon.png',
                        onclick: function () { alert('广科院,大数据与人工智能学院') }
                    }
                }
            },
            calculable: true,
            dataZoom: {  //配置数据区域缩放
                show: true, realtime: true,
                start: 20, end: 80
            },
            xAxis: [  //配置x轴坐标系
                {
                    type: 'category', boundaryGap: false,
                    data: function () {
                        var list = [];
                        for (var i = 1; i <= 30; i++) { list.push('2020-03-' + i); }
                        return list;
                    }()
                }
            ],
            yAxis: [  //配置y轴坐标系
                { type: 'value' }
            ],
            series: [  //配置数据系列
                {   //设置数据系列1
                    name: '最高', type: 'line', smooth: true,
                    data: function () {
                        var list = [];
                        for (var i = 1; i <= 30; i++) {
                            list.push(Math.round(Math.random() * 30) + 10);
                        }
                        return list;
                    }()
                },
                {   //设置数据系列2
                    name: '最低',
                    type: 'line', smooth: true,
                    data: function () {
                        var list = [];
                        for (var i = 1; i <= 30; i++) {
                            list.push(Math.round(Math.random() * 10));
                        }
                        return list;
                    }()
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);