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

编程问答

ECharts学习（1）--简单图表的绘制

發布時間：2023/11/29 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 ECharts学习（1）--简单图表的绘制小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.獲取ECharts

　　官網下載：http://echarts.baidu.com/download.html

2.在html頁面中引入ECharts文件

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ECharts練習</title><script type="text/javascript" src="js/echarts.min.js" ></script>//這里是引入ECharts的js文件</head><body></body> </html>

文件的目錄結構：

3.繪制一個簡單的圖表

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ECharts練習</title><script type="text/javascript" src="js/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>

4.效果圖展示

轉載于:https://www.cnblogs.com/wgl1995/p/6229730.html

總結

以上是生活随笔為你收集整理的ECharts学习（1）--简单图表的绘制的全部內容，希望文章能夠幫你解決所遇到的問題。

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