echarts.js初步

時間 2019-12-09

標籤 echarts.js echarts 初步欄目 JavaScript 简体版

原文原文鏈接

相信很多開發者會遇到開發數據顯示效果的狀況，這種狀況下echarts.js將成爲咱們很是好用的工具，下面就經過一個簡單的demo來了解一下它吧javascript

這是echarts.js的中文開發文檔地址http://echarts.baidu.com/option.html#xAxis.nameTextStylehtml

其運行代碼大體以下java

<body>
        <div id="main" style="height: 400px;width: 800px;"></div>
    </body>
    
    
    <script src="js/echarts.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        myChart.title = '多 Y 軸示例';

        var colors = ['#5793f3', '#d14a61', '#675bba'];
//        var colors = ['red', 'yellow', 'black'];
        
        
        var option = {
                color: colors,
            
                tooltip: {
                    trigger: 'axis',
                    //'item' 數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
                    //'axis' 座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
                    axisPointer: {
                        type: 'cross',
                        snap:true,
                    }
                },
                grid: {
                    right: '20%' //設置grid 組件離容器右側的距離。
                },
                legend: {
                    data:['蒸發量','降水量','平均溫度']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true,//能夠保證刻度線和標籤對齊
                        },
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '蒸發量',
                        min: 0,
                        max: 250,
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: colors[0]//座標軸顏色
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'//座標軸文字格式化
                        }
                    },
                    {
                        type: 'value',
                        name: '降水量',
                        min: 0,
                        max: 250,
                        position: 'right',//降水量的位置在右邊，
                        offset: 80,//向右偏移
                        axisLine: {
                            lineStyle: {
                                color: colors[1]//座標軸顏色
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: '溫度',
                        min: 0,
                        max: 25,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: colors[2]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [
                    {
                        name:'蒸發量',
                        type:'bar',
                        barCategoryGap:'50%',
                        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                    },
                    {
                        name:'降水量',
                        type:'bar',
                        yAxisIndex: 1,
                        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name:'平均溫度',
                        type:'line',
                        yAxisIndex: 2,
                        data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            };

        
        myChart.setOption(option);
    </script>

效果以下echarts

怎麼樣，效果不錯吧，這只是一個簡單的demo，歡迎大神交流溝通哈工具

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。