echarts 曲线图展示小圆点,中间亮色
时间: 2023-10-17 12:16:05 浏览: 139
在vue中使用Echarts画曲线图的示例
5星 · 资源好评率100%
可以使用 echarts 中的 `itemStyle` 属性来设置曲线图上数据点的样式,其中可以使用 `color` 属性来设置小圆点的颜色,使用 `borderColor` 属性来设置小圆点边框的颜色,使用 `borderWidth` 属性来设置小圆点边框的宽度,使用 `opacity` 属性来设置小圆点的透明度。而要设置小圆点中间的亮色,可以使用 echarts 中的 `emphasis` 属性来设置鼠标 hover 在小圆点上时的样式,其中可以使用 `itemStyle` 属性来设置小圆点的样式,使用 `color` 属性来设置小圆点的亮色。
下面是一个示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
symbol: 'circle', // 设置小圆点的形状为圆
symbolSize: 10, // 设置小圆点的大小
itemStyle: {
color: '#fff', // 设置小圆点的颜色为白色
borderColor: '#000', // 设置小圆点边框的颜色为黑色
borderWidth: 2, // 设置小圆点边框的宽度为2
opacity: 0.8 // 设置小圆点的透明度为0.8
},
emphasis: {
itemStyle: {
color: '#ff0' // 设置小圆点的亮色为黄色
}
}
}]
};
```
你可以根据自己的需要来调整小圆点的样式。
阅读全文