echarts 制作图表固定的三个步骤
生活随笔
收集整理的這篇文章主要介紹了
echarts 制作图表固定的三个步骤
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.導入js(）
（1）Echarts官網（第三方可視化圖表庫）：Apache ECharts
（2）echart.js（引入的js文件）下載地址：https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js
2. 為echarts圖表準備一個具有寬高的盒子
3.js的初始化
所有的圖表使用步驟都是固定的這三步，不同的圖表僅僅只是配置項和數據不同而已
每次只需要替換? ?let option={...}? 中? ?的option={...}即可
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 1.引入 相對于自己的ECharts 文件 --><script src="./echarts/echarts.min.js"></script> </head><body><!-- 2.準備具備寬高的盒子--><div id="main" style="width: 600px;height:400px;"></div><script>// 3.1 初始化echarts實例let myChart = echarts.init(document.querySelector('#main'));// 3.2 指定圖表的配置項和數據let option = {tooltip: {trigger: 'axis',position: function(pt) {return [pt[0], '10%'];}},title: {left: 'left',text: '2021全學科薪資走勢'},toolbox: {feature: {dataZoom: {yAxisIndex: 'none'},restore: {},saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']},yAxis: {type: 'value',boundaryGap: [0, '100%']},series: [{name: '薪資',type: 'line',symbol: 'emptyCircle',symbolSize: 8,smooth: true,sampling: 'lttb',itemStyle: {color: '#25b0ec'},areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'aqua'}, {offset: 1,color: '#ebf8fd'}])},data: [12000, 23000, 32000, 22000, 12000, 13000, 23440, 54330, 23330, 12000, 23000, 32000]}]};// 3.3顯示圖表。myChart.setOption(option)</script> </body></html>運行后的圖表如下：?
?
?
?
總結
以上是生活随笔為你收集整理的echarts 制作图表固定的三个步骤的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NDK撩妹三部曲（四）—NDK 开发如何
- 下一篇： 线段与线段交点的求解