vue内echart图折线图,有多条折线,不同折线的区域内展示不同的颜色,怎么设置?举个例子
时间: 2024-03-21 12:38:21 浏览: 119
可以使用 ECharts 中的渐变色(Gradient)来实现不同折线区域内展示不同颜色的效果。
以下是一个示例代码:
```html
<template>
<div class="chart-container">
<div ref="chart" class="chart"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
chartData: {
legend: {
data: ['折线1', '折线2']
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '折线1',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255, 0, 0, 0.3)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 0, 0, 0)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
},
{
name: '折线2',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310],
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(0, 255, 0, 0.3)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 255, 0, 0)' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
}
]
}
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
const chart = echarts.init(this.$refs.chart)
chart.setOption(this.chartData)
}
}
}
</script>
<style>
.chart-container {
width: 100%;
height: 400px;
}
.chart {
width: 100%;
height: 100%;
}
</style>
```
在以上代码中,我们通过设置 `areaStyle` 属性来设置折线区域内的颜色,其中 `color` 属性使用了渐变色。具体的渐变色设置可以参考 ECharts 官方文档。
阅读全文
相关推荐
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)