echarts 折线图 x y轴使用数组对象
时间: 2023-09-22 16:06:38 浏览: 123
可以使用 echarts 中的 xAxis.data 和 yAxis.data 属性来表示折线图的 x 轴和 y 轴的数据。其中,xAxis.data 是一个数组,包含了所有 x 轴上的刻度标签;yAxis.data 也是一个数组,包含了所有 y 轴上的刻度标签。
示例代码如下:
```javascript
option = {
xAxis: {
type: 'category',
data: [
{value: 'Mon', textStyle: {color: 'red'}},
{value: 'Tue', textStyle: {color: 'blue'}},
{value: 'Wed', textStyle: {color: 'green'}},
{value: 'Thu', textStyle: {color: 'orange'}},
{value: 'Fri', textStyle: {color: 'purple'}},
{value: 'Sat', textStyle: {color: 'grey'}},
{value: 'Sun', textStyle: {color: 'black'}}
]
},
yAxis: {
type: 'value',
data: [
{value: 0, textStyle: {color: 'red'}},
{value: 50, textStyle: {color: 'blue'}},
{value: 100, textStyle: {color: 'green'}},
{value: 150, textStyle: {color: 'orange'}},
{value: 200, textStyle: {color: 'purple'}}
]
},
series: [{
data: [
{value: 120, symbolSize: 8},
{value: 200, symbolSize: 12},
{value: 150, symbolSize: 10},
{value: 80, symbolSize: 6},
{value: 70, symbolSize: 4},
{value: 110, symbolSize: 8},
{value: 130, symbolSize: 10}
],
type: 'line'
}]
};
```
在上面的示例中,xAxis.data 和 yAxis.data 都是数组对象,每个数组对象中的 value 属性表示刻度标签的值,textStyle 属性表示该刻度标签的样式。通过这种方式,可以方便地控制每个刻度标签的样式。
阅读全文