记录下ECharts的一些功能

用到ECharts记录下一些功能免得以后找文档找不到。

这个博客对ECharts讲解很全面 http://www.stepday.com/my.stepday/?echarts

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar', // 柱状图
            'echarts/chart/line'// 折现图
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('echartDiv'));

            if (xData.length < 1 || yData.length < 1) {
                myChart.showLoading({
                    text: '暂无数据',
                    effect: 'bubble',
                    textStyle: {
                        fontSize: 30
                    }
                });
                return;
            }

            option = {
                title: {
                    text: '企业实习分布情况',
                    subtext: '人数分布'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['实习人数', '平均薪资']
                },
                toolbox: {//工具栏
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataZoom: { show: true },//区域缩放
                        dataView: { show: true, readOnly: true },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                dataZoom: {//滚动条
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 40,
                    y: 50,
                    height: 20
                },
                xAxis: [
                    {
                        name: '        企业',
                        type: 'category',
                        data: xData,
                        interval: 0,
                        axisLabel: {//x轴文字
                            rotate: 40, //刻度旋转角度
                            textStyle: {
                                color: "black", //刻度颜色
                                fontSize: 11  //刻度大小
                            }
                        },
                        splitArea: { show: true },//显示格子阴影
                    }
                ],
                grid: {
                    y: 130,
                    y2: 120// 可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                },
                yAxis: [
                     {
                         name: '实习人数',
                         type: 'value',
                         axisLabel: {//格式化数据
                             formatter: '{value}人 '
                         }
                     },
                    {
                        name: '平均薪资',
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}元'
                        },
                        splitLine: { show: false }
                    }
                ],
                series: [
                    {
                        name: '实习人数',
                        type: 'bar',
                        data: yData,
                        itemStyle: { // 系列级个性化
                            normal: {
                                barBorderRadius: 6,//柱状图四角平滑(好像有其他方法)
                            },
                            emphasis: {
                                barBorderRadius: 6,
                            }
                        },
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },

                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    },
                    {
                        name: '平均薪资',
                        smooth: true,//使折线图平滑显示
                        type: 'line',
                        data: yDataMoney,
                        yAxisIndex: 1,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },

                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }

                ]
            };
            // 为echarts对象加载数据 
            myChart.setOption(option);
        }
    );