echarts5 折线图平滑曲线渐变区域填充样式

最新推荐文章于 2024-05-10 17:17:53 发布

原创

最新推荐文章于 2024-05-10 17:17:53 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

这篇博客介绍了如何使用ECharts5库创建带有平滑曲线和渐变区域填充的折线图。首先，通过yarn添加echarts依赖，然后导入并注册所需组件。接着，初始化图表并配置图表选项，包括网格、坐标轴、提示框等，并为两个系列设置不同的颜色和渐变效果。最后，应用配置并显示图表。

echarts5 折线图平滑曲线渐变区域填充样式

说明

平时设计图经常会出现这种区域渐变的样式，所以记录下来以便后面使用。

效果图

区域渐变效果图

安装echarts

yarn add echarts

配置代码

// 引入核心
import * as echarts from 'echarts/core'
// 引入折线图图表
import {
   
   
  LineChart
} from 'echarts/charts'
  // 引入直角坐标系组件，组件后缀都为 Component
import {
   
   
  GridComponent,
  LegendComponent,
  TooltipComponent,
  TitleComponent
} from 'echarts/components'
  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
   
   
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [GridComponent, TitleComponent, LegendComponent, TooltipComponent,LineChart, CanvasRenderer]
)

// 确保dom中已经有挂载
const lineChart = echarts.init(document.querySelector('#echarts1'), 'macarons')
const chartOption = {
   
   
        tooltip: {
   
   
          trigger: 'axis',
          axisPointer: {
   
    // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        }