初学echart的简单使用
生活随笔
收集整理的這篇文章主要介紹了
初学echart的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
簡單的echart使用方法
1.引入外部echart的js文件
<script type="text/javascript" src="js/echarts.min.js"></script>
2.建立放置容器，div使用放置容器布局
`
放置容器配置
? div格局應用
? `
<div id="domain1"> </div>`3.編寫javascript
a.初始化echarts案例
var myCharts=echarts.init(document.getElementById(“id(容器id)”));
b.指定圖表配置，添加數據，完成option配置
var option={
}
c.使用指定的配置和數據顯示
myCharts.setOption(option);
4.實例演示:
源碼:
`
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>pine chart</title><script type="text/javascript" src="js/echarts.min.js"></script><!-- 容器css配置 --><style>body {text-align: center;}#domain1 {width: 600px;height: 400px;}</style> </head><body><h1>echart初學</h1><div id="domain1"></div><script type="text/javascript">//初始化echarts案例var myCharts = echarts.init(document.getElementById("domain1"));//指定圖表配置，添加數據//1.柱狀圖var option = {title: {text: '期中考試成績'},tooltip: {},legend: {data: ['人數']},xAxis: {data: ["60分以下", "60~69", "70~79", "80~89", "90~99", "100"]},yAxis: {},series: [{name: '人數',type: 'bar',data: [5, 15, 36, 10, 7, 1]}]};//使用指定的配置和數據顯示myCharts.setOption(option);</script> </body> </html>`
運行結果:
option配置里的引用可以去官網找，根據自己的個人需求修改即可。echart官網
echart的js也可以去官網下載，或者使用下面這個免費的連接。echart免費資源
總結
以上是生活随笔為你收集整理的初学echart的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux之《荒岛余生》（二）CPU篇
- 下一篇： iOS 禁用休闲时钟锁屏