Echarts插件使用

来源：互联网发布：怎么抓取网页数据编辑：程序博客网时间：2024/06/05 04:21

Echarts插件使用
1、插件引用
<script src="../js/common/echarts.min.js" type="text/javascript" charset="utf-8"></script>
2、html代码

  <!--门票销量图-->    <div class="chart_box" >        <h2>近七日马鞍山景点订单门票数概览 </h2>        <div class="chart" id="ticketSale"></div>    </div>    <div class="center_box">        <!-- 客流量图 -->        <div class="chart_box">            <h2>近七日马鞍山线路订单数概览 </h2>            <div class="chart" id="passengerFlow"></div>        </div>        <!---->        <div class="chart_box ">            <h2>昨日销售总金额（元）</h2>            <div class="chart" id="totalNum"></div>        </div>    </div>

3、js代码
   /**
   * 默认参数
   */
   defaultOption: {
       xdata:['8-23','8-24','8-25','8-26','8-27','8-28'], //x轴日期
   },
   1、线状图

   /**     * 景点echarts线状图     * @returns     */    scenicChart:function(ydataRoute){        var worldMapContainer = document.getElementById('ticketSale');        //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽        var resizeWorldMapContainer = function () {            worldMapContainer.style.width = window.innerWidth-50+'px';            //worldMapContainer.style.height = window.innerHeight+'px';        };        //设置容器高宽        resizeWorldMapContainer();        /*初始化景点门票数echarts实例*/        var scenicChart = echarts.init(worldMapContainer);        var option = {                color: ['#E47A3D'],                tooltip : {                    trigger: 'axis'                },                grid: {                    left: '3%',                    right: '4%',                    bottom: '3%',                    containLabel: true                },                xAxis : [                    {                        type : 'category',                        boundaryGap : false,                        data : main.defaultOption.xdata,                    }                ],                yAxis : [                    {                        type : 'value'                    }                ],                series : [                    {                        name:'门票销量',                        symbol:'none',  //这句就是去掉点的                          type:'line',                          smooth:true,  //这句就是让曲线变平滑的                        stack: '总量',                        areaStyle: {normal: {}},                        data:ydataRoute                    }                    ]            };         // 使用刚指定的配置项和数据显示图表。        scenicChart.setOption(option);        //用于使chart自适应高度和宽度        window.onresize = function () {            //重置容器高宽            resizeWorldMapContainer();            scenicChart.resize();        };            },

2、柱状图

       /**         * 线路echart图标         */        routeChart:function(ydataRoute){            var routeChartContainer = document.getElementById('passengerFlow');            //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽            /*var resizeRouteChartContainer = function () {                routeChartContainer.style.width = window.innerWidth-900+'px';                //worldMapContainer.style.height = window.innerHeight+'px';            };*/            //设置容器高宽            //resizeRouteChartContainer();            /*初始化线路订单数echarts实例*/            var routeChart = echarts.init(routeChartContainer);            var option = {                color: ['#68B3C8'],                tooltip : {                    trigger: 'axis',                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'                    }                },                grid: {                    left: '3%',                    right: '4%',                    bottom: '3%',                    containLabel: true                },                xAxis : [                    {                        type : 'category',                        data : main.defaultOption.xdata,                        axisTick: {                            alignWithLabel: true                        }                    }                ],                yAxis : [                    {                        type : 'value'                    }                ],                series : [                    {                        name:'客流量',                        type:'bar',                        barWidth: '60%',                        data: ydataRoute,                         label: {                            normal: {                                show: true,                                position: 'top'                            }                        }                    }                ]            };             // 使用刚指定的配置项和数据显示图表。            routeChart.setOption(option);                        //用于使chart自适应高度和宽度            /*window.onresize = function () {                //重置容器高宽                resizeRouteChartContainer();                routeChart.resize();            };*/        },

3.饼状图

        /**         * 初始化饼状图图标         * @returns         */        initEcharts:function(allData){                        /*酒店、景点、线路的饼状图*/            var myChart = echarts.init(document.getElementById('totalNum'));                         // 指定图表的配置项和数据             option = {                tooltip: {                    trigger: 'item',                },                series: [                    {                        type:'pie',                        radius : '60%',                        center: ['50%', '60%'],                        avoidLabelOverlap: false,                        color:['#68B3C8','#EB5E28','#F3BB45'],                        label: {                            normal: {                                //position: 'inner',                                show: true,                                textStyle: {                                    fontSize: '16',                                }                            },                            emphasis: {                                show: true,                                textStyle: {                                    fontSize: '16',                                }                            }                        },                        labelLine: {                            normal: {                                //show:false                                smooth: 0.2,                                length: 20,                                length2: 20                            }                        },                        animation:false,                        itemStyle:{                            normal:{                                  label:{                                    show: true,                                    formatter: '{b} : ({c})'                                  },                                  //labelLine :{show:true}                                }                            } ,                        data:allData,                    }                ]            };                        // 使用刚指定的配置项和数据显示图表。            myChart.setOption(option);                    },

阅读全文

0 0