點(diǎn)擊查看專(zhuān)欄目錄


Echarts折線區(qū)域面積圖的視覺(jué)效果更加飽滿豐富，在系列不多的場(chǎng)景下尤其適用。區(qū)域面積圖將折線到坐標(biāo)軸的空間設(shè)置背景色，用區(qū)域面積表達(dá)數(shù)據(jù)。通過(guò) areaStyle 設(shè)置折線圖的填充區(qū)域樣式，將其設(shè)為為 {} 表示使用默認(rèn)樣式，即使用系列的顏色以半透明的方式填充區(qū)域

示例效果

示例源代碼（共142行）

/*
* @Author: 還是大劍師蘭特（CSDN）
* @下面源代碼版權(quán)歸還是大劍師蘭特所有，可供學(xué)習(xí)或商業(yè)項(xiàng)目中借鑒，未經(jīng)授權(quán)，不得重復(fù)地發(fā)表到博客、論壇，問(wèn)答，git等公共空間或網(wǎng)站中。
* @Email: 2909222303@qq.com
* @First published in CSDN
* @First published time: 2023-02-13
*/
<template><div class="container"><h3>vue+echarts：設(shè)置面積區(qū)域圖</h3><p>大劍師蘭特，還是大劍師蘭特</p><div id="vue-echarts" ref="refEcharts"> </div></div>
</template><script>import * as echarts from 'echarts'; //局部引用，如果采用全局模式，這里不寫(xiě)export default {name: 'cuclife',data() {return {}},methods: {initCharts() {let myChart = echarts.init(this.$refs.refEcharts);myChart.setOption({title: {text: '標(biāo)題：ECharts示例'},xAxis: {type: 'category',data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet']},yAxis: {type: 'value',name: '技術(shù)技能值', //坐標(biāo)軸名稱(chēng)nameLocation: 'middle', //坐標(biāo)軸的位置nameTextStyle: {color: '#ff00ff',//align:'left',},nameGap: 50, //坐標(biāo)軸名稱(chēng)與軸線之間的距離nameRotate: 90, //坐標(biāo)軸名字旋轉(zhuǎn)角度值,axisLine: {lineStyle: {color: '#ff00ff'},symbol: ['none', 'arrow'], //軸線兩邊的箭頭symbolSize: [8, 12]},axisTick: {inside: false, //標(biāo)軸刻度是否朝內(nèi)，默認(rèn)朝外},axisLabel: {show: true,inside: false,formatter: '{value}'},splitArea: {show: true,color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],}},grid: {x:50, y:55, x2:25, y2:20, containLabel: true },series: [{type: 'line',data: [15, 36, 10, 10, 20],areaStyle: {color: '#00f',opacity: 0.2},itemStyle: {//靜態(tài)時(shí)顯示狀態(tài)color: new echarts.graphic.LinearGradient(// (x1,y1) 點(diǎn)到點(diǎn) (x2,y2) 之間進(jìn)行漸變0, 0, 1, 0,[{offset: 0,color: '#ff00ff'}, // 0 起始顏色{offset: 0.5,color: '#00ffff'}, // 0 起始顏色{offset: 1,color: '#ff0000'} // 1 結(jié)束顏色]),},}]});}},mounted() {this.initCharts();}}
</script>
<style scoped>.container {width: 840px;height: 580px;margin: 50px auto 0;border: 1px solid rgb(228, 57, 97);}#vue-echarts {width: 800px;height: 460px;border: 1px solid #d8d;margin: 0 auto;}
</style>

相關(guān)資料參考

https://echarts.apache.org/zh/option.html#series-line.areaStyle

專(zhuān)欄介紹

在vue和echarts聯(lián)合技術(shù)棧的操控下，本專(zhuān)欄提供行之有效的源代碼示例。這里既包括樣式的修改，又包括常用bug的解決。
（1）提供title示例：展示控制標(biāo)題的顏色、位置、子標(biāo)題，連接等
（2）提供legend示例：展示控制圖例的類(lèi)型、寬度、高度、位置、間隙，邊框、陰影、透明度、偏移，字體、顏色，提示語(yǔ)等
（3）提供grid示例：展示控制繪圖網(wǎng)格的位置、寬度、高度、邊框、陰影等
（4）提供xAxis示例：展示控制x 軸的位置、類(lèi)型、名稱(chēng)、字體、對(duì)齊方式、邊框、陰影、寬度、高度等
（5）提供yAxis示例：展示控制y 軸的位置、類(lèi)型、名稱(chēng)、字體、對(duì)齊方式、邊框、陰影、寬度、高度等
（6）提供dataZoom示例：展示控制區(qū)域縮放的類(lèi)型、位置、filterMode等
（7）提供tooltip示例：展示控制提示框組件的觸發(fā)方式、位置、樣式，標(biāo)簽、動(dòng)畫(huà)、內(nèi)容格式器等
（8）提供地理坐標(biāo)系示例：展示控制地理坐標(biāo)的經(jīng)緯度、放縮、位置，距離、字體、邊框等
（9）提供animation示例：展示控制動(dòng)畫(huà)的持續(xù)時(shí)間、延遲時(shí)間、動(dòng)畫(huà)方式，連接等
（10）提供其他示例：展示series等組件的信息內(nèi)容。