1、簡(jiǎn)介
ECharts是百度的一個(gè)項(xiàng)目，后來(lái)百度把Echart捐給apache，用于圖表展示，提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日?qǐng)D，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤，并且支持圖與圖之間的混搭。
官方網(wǎng)站：https://echarts.apache.org/examples/zh/

入門參考：官網(wǎng)->文檔->教程->5分鐘上手ECharts
（1）創(chuàng)建html頁(yè)面：柱圖.html
（2）引入ECharts

<!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script>

（3）定義圖表區(qū)域

<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div>

（4）渲染圖表

<script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option); </script>

效果圖：

3、折線圖
實(shí)例參考：官網(wǎng)->實(shí)例->官方實(shí)例 https://echarts.baidu.com/examples/
折線圖.html

<script>var myChart = echarts.init(document.getElementById('main'));var option = {//x軸是類目軸（離散數(shù)據(jù)）,必須通過(guò)data設(shè)置類目數(shù)據(jù)xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},//y軸是數(shù)據(jù)軸（連續(xù)數(shù)據(jù)）yAxis: {type: 'value'},//系列列表。每個(gè)系列通過(guò) type 決定自己的圖表類型series: [{//系列中的數(shù)據(jù)內(nèi)容數(shù)組data: [820, 932, 901, 934, 1290, 1330, 1320],//折線圖type: 'line'}]};myChart.setOption(option);</script>

鏈接：https://pan.baidu.com/s/1AmW-Fv5nEDTbR45zIxvpVA
提取碼：7pnt

總結(jié)

以上是生活随笔為你收集整理的echartsdemo可视化统计（笔记分享）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。