Echarts輕鬆入門，內附踩坑祕籍

時間 2019-12-13

標籤 echarts 輕鬆入門祕籍简体版

原文原文鏈接

首先介紹一下咱們的主角ECharts

ECharts，一個純 Javascript 的圖表庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 **Canvas** 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。

ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，而且對移動端作了深度的優化。javascript

入門開始

Echarts引入方式

1.npm或者cnpm安裝html

cnpm install echarts --save

而後在須要的模塊導入java

let echarts = require('echarts/lib/echarts');//引入echarts
require('echarts/lib/chart/bar'); //柱狀圖
require('echarts/lib/component/tooltip');// 提示框
require('echarts/lib/component/title');//標題組件

2.單文件引入（echarts官網）npm

<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

使用Echarts

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts單文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts圖表
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
            title : {    //標題 可用 show 顯示策略，可選爲：true（顯示） | false（隱藏）
                text: '某地區蒸發量和降水量',
                subtext: '純屬虛構'
            },
            tooltip : { //提示框，鼠標懸浮交互時的信息提示（可接收function，自定義顯示方式）
                trigger: 'axis'
            },
            legend: { //圖例，每一個圖表最多僅有一個圖例(可修改佈局，背景色，邊框)
                data:['蒸發量','降水量']
            },
            calculable : true,//是否啓用拖拽重計算特性，默認關閉
            xAxis : [//直角座標系中橫軸數組(座標軸有三種類型，類目型、數值型和時間型）
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [//直角座標系中縱軸數組，數組中每一項表明一條縱軸座標軸，僅有一條時可省略數組
                {
                    type : 'value'
                }
            ],
            series : [//驅動圖表生成的數據內容數組，數組中每一項爲一個系列的選項及數據，其中個別選項僅在部分圖表類型中有效，請注意適用類型
                {
                    name:'蒸發量',
                    type:'bar',
                    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],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'降水量',
                    type:'bar',
                    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],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };
                    
        // 爲echarts對象加載數據 
        myChart.setOption(option); 
    </script>
</body>

圖表生成以下

注意！！！

Echarts的目標元素要設置高度數組

<div id="main" style="height:400px"></div>

不然會報錯
瀏覽器

resize

當遇到響應式佈局高寬不固定時，確定會發生圖表擠壓或者顯示不全的問題echarts

那麼咱們將使用Echarts提供的resize(調整大小)方法

首先咱們看一下頁面生成之後的Echarts元素dom

每一個Echarts圖表都提供了惟一ID,咱們能夠獲取這個ID從而操縱對應的Echarts圖表佈局

let charId = document.getElementById('main').getAttribute('_echarts_instance_');
echarts.getInstanceById(charId).resize();

固然若是你能直接獲取Echarts實例對象，那麼就能夠直接操做對應的圖表啦！（實例指的就是接口init()返回的對象，即上述代碼中的「myChart」，非get接口均返回自身self支持鏈式調用）優化

setTimeout(function (){
    window.onresize = function () {
        myChart.resize();
       }
},200)

echarts的實例方法很是重要,由於在實際運用中咱們的圖表的數據不多是死的，而是動態變化的,實例方法爲動態改變數據提供了方法。

注:內容摘自echarts官網，原文地址:http://echarts.baidu.com/doc/...

1. webpack入門祕籍
2. echarts 踩坑記
3. 輕鬆入門springboot
4. 輕鬆入門Maven
5. UML輕鬆入門
6. RxJava2輕鬆入門
7. spss輕鬆入門
8. ibatis 輕鬆入門
9. webpack 入門踩坑
10. weex入門踩坑
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索