百度圖表插件echart簡單應用，簡單配置一些要顯示的樣式及種類

本文轉載自查看原文 2017-07-04 17:47 3035 圖表/ echart/ js特效類/ 其他/ 插件應用/ WEB類

從echart官網下載js，然后引入jq即可運行。足夠簡單應用了

關鍵詞：echart控制：圖標標題、數據標題、折線圖、柱狀圖切換按鈕、恢復刷新圖表按鈕、保存為圖片按鈕、坐標系控制、坐標數據、坐標傾斜角度、刻度位置、要顯示的標線（平均值、最大值、最高點）、折線顏色、折線點顏色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>折線圖</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/echarts.js"></script>
    </head>
    <body>
        <div id="chart_box" style="width: 100%;height:400px;margin:0 auto;"></div>
    </body>
    
    <script>
         // 基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('chart_box'));

        // 指定圖表的配置項和數據
        option = {
                title: {
                    text: '圖表標題',//圖表標題　　　　
                    subtext: '近一周推廣數據'//數據標題
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['日平均點擊量','最高點擊量']
                },
                toolbox: {
                    show:true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        //magicType: {type: ['line', 'bar']},//折線圖、柱狀圖切換
                        //restore: {},//恢復，即刷新圖表
                        //saveAsImage: {}//保存為圖片
                    }
                },
                grid:{//直角坐標系控制
                    left:50,//grid 組件離容器左側的距離
                    top:70,
                    right:40,
                    bottom:50,
                },
                xAxis:  {    //設置橫坐標
                    type: 'category',
                    axisLabel: {//橫坐標的控制
                        show:true,//是否顯示橫坐標數據
                        rotate: 30,//坐標的傾斜角度
                        inside:false,//刻度是否朝內
                        margin:8,//標尺與軸線的距離，默認8
                        },
                    boundaryGap: false,
                    data: ['05.02','05.03','05.04','05.05','05.06','05.07','05.08']
                },
                yAxis: {    //設置縱坐標
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}',
                        rotate: 30,//坐標的傾斜角度
                        inside:true,//刻度是否朝內
                    }
                },
                series: [
                    {
                        name:'日平均點擊量',
                        type:'line',
                        data:[400, 554, 1580, 1355, 1111, 1644, 1066],
                        markPoint: {
                            
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'最高點擊量',
                        type:'line',
                        data:[800, 1000, 1700, 1689, 1500, 1900, 2016],
                        markPoint: {
                            data: [
                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
            //                      label: {
            //                          normal: {
            //                              position: 'start',
            //                              formatter: '最大值'
            //                          }
            //                      },
            //                      type: 'max',
            //                      name: '最高點'
                                }]
                            ]
                        },

　　　　　　　　　　　　　　　 itemStyle: {
　　　　　　　　　　　　　　　　　　normal: {
　　　　　　　　　　　　　　　　　　　　color: '#00FF00',//改變折線點的顏色
　　　　　　　　　　　　　　　　　　　　lineStyle: { //改變折線顏色
　　　　　　　　　　　　　　　　　　　　　　color: '#00FF00'
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　},


                    }
                ]
        };




        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 百度開源圖表Echart-牛刀小試百度數據可視化圖表套件echart實戰記錄百度富文本踩過的一些坑百度地圖學習（Ⅰ）-Android端地圖的顯示及簡單應用實現分享功能插件一---百度分享插件應用百度地圖插件（百度地圖AK申請配置指南）百度地圖SDK使用出現的一些問題同時集成百度地圖、定位以及導航遇到的一些坑百度語音識別、合成項目集成及遇到的一些問題注意百度地圖改標注樣式