有勇氣的牛排

官網

www.920vip.net
www920z.net

echarts 介紹

官網：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 準備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 350px;height:250px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據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}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option); </script>

option詳細配置

option = {title: {text: '標題',subtext: '這是標題描述'},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},// 比例大小 設置顏色color: ['red','blue'],// 鼠標聚焦tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},// 保存圖片toolbox: {show: true,feature: {saveAsImage: {}}}, };

總結

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

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