有勇氣的牛排

官網(wǎng)

www.920vip.net
www920z.net

echarts 介紹

官網(wǎng)：https://echarts.apache.org/

菜鳥教程

使用

CDN

https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

配置

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM --> <div id="main" style="width: 350px;height:250px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option); </script>

option詳細(xì)配置

option = {title: {text: '標(biāo)題',subtext: '這是標(biāo)題描述'},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value',// 初始化 單位 (可以不填)axisLabel: {formatter: '{value} 萬元'},// axisPointer: {// snap: true// }},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true,// 取最大、小值markPoint: {data: [{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' }]},// 取平均值markLine: {data: [{ type: 'average', name: 'Avg' }]}},{data: [10, 92, 901, 34, 190, 130, 130],type: 'line',smooth: true, // 平滑// 取最大、小值markPoint: {data: [{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' }]},// 取平均值markLine: {data: [{ type: 'average', name: 'Avg' }]}}],// 比例大小grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},// 比例大小 設(shè)置顏色color: ['red','blue'],// 鼠標(biāo)聚焦tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},// 保存圖片toolbox: {show: true,feature: {saveAsImage: {}}}, };

總結(jié)

以上是生活随笔為你收集整理的html前端 echarts图表使用详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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