使用echarts實現圖表項目的注意點

這篇文章帶給大家的內容是關於使用echarts實現圖表項目的注意點，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

最近一段時間做了一個使用echarts的圖表項目。由於理解API能力有限，使用起來並非暢通無阻。
所謂好記性不如爛筆頭，現將一些比較關鍵的點記錄一下，供後續查看。

一使用方法

專案：ionic angular4 echarts

    1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入
    <script src="assets/js/echarts.min.js"></script>

    2.在组件的.html文件中
    <div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>

    3.在组件的.ts文件中配置好options的值pieOption以及点击drill down的逻辑

二注意點

1.每一塊渲染區域都有一個position的設置，可以自訂離上、下、左、右的距離

    grid:{
        top:...
        left:...
        bottom:...
        right:...
    }
    
    legend:{
        top:...
        left:...
        ...
    }

2.每一個涉及值的顯示點基本上都提供了formatter

tooltip:{
        formatter: params => { //自定义hover状态数据显示的情况
            let str = '';
            str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}<br>`;
                //item中提供了图标、颜色等
            });
            return str;
        }
    }
    
    legend:{
        formatter: (name) => { //需要根据值去重算数据然后显示的情况
            let source = data.source[name.toUpperCase()];
            var total = 0;
            source.forEach(element => {
                total += element;
            });

            return name + ': ' + Math.round(total).toLocaleString();
        }
    }

3.xAxis/yAxis 配置座標軸的一些屬性刻度、座標軸名稱、如何顯示座標資訊

4.toolbox 工具欄，內建有匯出圖片、資料視圖、動態類型切換、資料區域縮放、重設5個工具
其中匯出圖片可以自行透過canvas的相關API 將多個圖表一併導

5.dataZoom 資料區域縮放元件-- 可以一個也可以多個

dataZoom:[
    {
        type:'inside', //内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚
        ...
    },
    {
        type:'slider', //在外部 显示为滑动条形的一个组件，可直接拖动使用
        ...
    }
]

6.series 系列列表，每個系列透過type決定圖表類型--根據不同的圖表注入不同格式的數據

series:{
    type:'line'/'pie'/'bar'/'treemap',
    ...
}

其實細分到每一個圖表都有一些細微的設置，數據以及顏色、間距等，待續...

相關推薦：

echarts實現餅圖扇區統計表的新增點擊事件

使用Echarts實作動態曲線圖表

以上是使用echarts實現圖表項目的注意點的詳細內容。更多資訊請關注PHP中文網其他相關文章！