Vue3+vite
1.安装 yarn add echarts
2.引入 import * as echarts from 'echarts';
js
const chainEcharts = () =>{ var time = state.timeList; var max = state.maxValueData; var min = state.minValueData; var mean = state.meanValueData; var chartDom = document.getElementById('chainEcharts'); var myChart = echarts.init(chartDom); var option; option = { color:['#68BBA0','#E6A939','#E63939'], legend: { data: ['最低值', '平均值','最高值'], top: '16', right: '4%', itemWidth: 13, itemHeight: 13, textStyle: { color: "rgba(222, 235, 255, 1)" }, }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, showDelay: 0, backgroundColor: '#272B35', borderColor: '#65717D', textStyle: { color: '#DEEBFF', fontStyle: 'normal', fontWeight: 'normal', fontSize: '16', }, }, xAxis: { data: time, axisLine:{ show:false }, axisLabel: { color: 'rgba(186, 195, 207, 1)' }, splitLine:{ show:false, }, axisTick: { show: false }, }, yAxis: { axisTick: { show: false }, axisLine:{ lineStyle:{ color:'#0B2063', }, }, splitLine:{ show:true, lineStyle:{ color:'rgba(56, 68, 85, 1)', type:'dashed', } }, axisLabel: { color: 'rgba(186, 195, 207, 1)' }, }, dataZoom: [ { type: 'slider', start: 0, end: 50 }, ], grid: { left: '3%', right: '10', bottom: '16%', containLabel: true }, series: [ { name: '最低值', type: 'line', symbolSize: 8, symbol: "circle", areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#526A59' }, { offset: 1, color: '#223239' } ]) }, stack: 'Total', data: min }, { name: '平均值', type: 'line', symbolSize: 8, symbol: "circle", areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#734E34' }, { offset: 1, color: '#514133' } ]) }, stack: 'Total', data: mean }, { name: '最高值', type: 'line', symbolSize: 8, symbol: "circle", areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#402430' }, { offset: 1, color: '#2E2531' } ]) }, stack: 'Total', data: max }, ] }; option && myChart.setOption(option); }
onMounted(()=>{ chainEcharts() })