當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ECharts3使用入门

發布時間：2023/12/10 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 ECharts3使用入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近項目中有用到百度ECharts，目前版本已經到3了，很多人說百度的這個東西是他最有良心的產品，用起來要比國外的插件簡單點，這里主要講一些簡單的應用，算是簡單的入門級別的，如果要是想更加的深入可以去看看范例。

1.前期準備

（1）相較于以前好像使用起來更加的簡單了，直接引入echarts.min.js。

（2）寫一個div用來存放圖表。

（3）js代碼中根據div的id號獲取容器，寫圖表的相關參數，使用setoption生成圖表。

<div id="main" style="width: 600px;height:400px;"></div><script src="js/echarts.js "></script> <script>獲取容器的id并賦值給變量myChartvar myChart = echarts.init(document.getElementById('main'));/*用來配置參數*/option = {}/*調用option生成圖表*/myChart.setOption(option)</script>

2.生成柱狀圖
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><script src="echarts.min.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html>運行的結果：

3.生成曲線圖

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="pic4" style="width: 600px;height:400px;"></div><script src="F:\baidu-echarts\echarts.min.js"></script><script>var myChart13 = echarts.init(document.getElementById('pic4'));var data = [];option15 = {title: {text: '曲線',},tooltip: {trigger: 'axis',},legend: {data:['昨日(11月8日)','今日(11月9日)']},grid: {left: '1%',right: '1%',bottom: '3%',containLabel: true},toolbox: {show: false,feature: {dataZoom: {yAxisIndex: 'none'},dataView: {readOnly: false},magicType: {type: ['line', 'bar']},restore: {},saveAsImage: {}}},color:["red","#CD3333"],xAxis: {type: 'category',boundaryGap: false,data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']},yAxis: {type: 'value',name: '單位（kW）',axisLabel: {formatter: '{value}'}},series: [{name:'昨日(11月8日)',type:'line',data:[110,106,110,110,318,119,205,256,156,309,256,306,206,356,456,486,565.45,234,156,206,126,256,150,276],},{type:'line',name : '今日(11月9日)',data:[210,136,120,120,118,219,195,176,156,329,356,346,406.54,256,156],}]};myChart13.setOption(option15);</script> </body> </html>最后的效果：

3.餅狀圖的制作

只寫option的那一部分，其他的和上面的都是一樣的。

option = {title : {text: '某站點用戶訪問來源',subtext: '純屬虛構',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} (ozvdkddzhkzd%)"},legend: {orient: 'vertical',left: 'left',data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']},series : [{name: '訪問來源',type: 'pie',radius : '55%',center: ['50%', '60%'],data:[{value:335, name:'直接訪問'},{value:310, name:'郵件營銷'},{value:234, name:'聯盟廣告'},{value:135, name:'視頻廣告'},{value:1548, name:'搜索引擎'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}] };最終效果：

上面就是三個簡單的應用，矩形圖、曲線圖和餅狀圖的簡單實例。

總結

以上是生活随笔為你收集整理的ECharts3使用入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

入门