使用echarts生成颜色渐变曲线图

本文主要是介绍使用echarts生成颜色渐变曲线图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图:
在这里插入图片描述

1、安装echarts

npm install echarts --save

2、全局注册组件

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

3、结构
附: 计算显示日期的工具文件

/** 计算月份显示* @param {} * @returns {}*/export function getLastFiveMonths() {let dates = [];let currentDate = new Date();// 开始时就设置为前一个月currentDate.setMonth(currentDate.getMonth() - 1);for (let i = 0; i < 5; i++) {let month = currentDate.getMonth() + 1;  // getMonth 返回的月份从 0 开始，所以我们需要加 1let year = currentDate.getFullYear();// 根据你的需求，月份需要转化为中文let monthInChinese = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"][month-1];dates.push(monthInChinese + '\n' + year);  // 将新的日期添加到数组的开始currentDate.setMonth(currentDate.getMonth() - 1);  // 将日期设置为前一个月}return dates;
}

<template><div class="EchartPractice"><div id="main"></div></div>
</template>
import { getLastFiveMonths } from '@/utils/calculate'
// 组件数据data() {return {figure: [2297, 1297, 2297, 1297, 2297],colorType: [{offset: 0,color: '#b5c3ff' // 0% 处的颜色},{offset: 0.5,color: '#b5c3ff' // 0% 处的颜色},{offset: 1,color: '#bcd9fb' // 100% 处的颜色}],tag: null}},
mounted() {this.drawChart()
},
drawChart() {console.log("返回的日期",getLastFiveMonths());let getLastFiveMonthsData=getLastFiveMonths()let that = thislet myEchart = this.$echarts.init(document.getElementById('main'))let option = {xAxis: {data: getLastFiveMonthsData,axisLine: {lineStyle: {color: '#B5C3FF' // 这里设置x轴颜色}},axisTick: {show: true, //  是否显示inside: false, // 坐标轴刻度是否朝内，默认朝外(false)length: 5, // 坐标轴刻度的长度alignWithLabel: true, //刻度线与刻度标签是否对齐lineStyle: {color: '#B5C3FF', //刻度线颜色width: 2, // 刻度线粗细type: 'dashed' // 坐标轴线线的类型（'solid'实线；'dashed'虚线；'dotted'点状）}},axisLabel: {color: '#1F359C',fontStyle: 'normal', // 文字字体的风格（'normal'无样式；'italic'斜体；'oblique'倾斜字体）fontWeight: 'normal', // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）fontSize: '13' // 文字字体大小}},yAxis: {show: false // 是否显示x轴},series: [{data: this.figure,type: 'line',//  formatter: '{c}次',symbolSize: 0, // 设置数据点大小为0，即不显示圆点itemStyle: {normal: {label: {show: true,position: 'top',textStyle: {color: '#1F359C'},//   添加单位formatter: function (params) {let type = nullif (that.message == 1) {type = params.value + '秒'} else {type = params.value + '次'}return type}}}},smooth: true,// symbol: 'none',areaStyle: {// color: '#b5c3ff'normal: {color: {type: 'linear',// 设置渐变起始点和结束点，从上到下渐变x: 0,y: 0,x2: 0,y2: 1,colorStops: that.colorType,global: false // 缺省为 false}}}}]}myEchart.setOption(option)}