使用eacharts组件生成净值走势图 并且支持X轴Y轴交叉十字星展示
时间: 2023-11-28 17:48:45 浏览: 101
首先,需要引入ECharts库和相关主题:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>
```
接着,在HTML中创建一个容器用于渲染ECharts图表:
```html
<div id="chart" style="width: 100%; height: 400px;"></div>
```
然后,在JavaScript中获取数据并配置ECharts选项:
```javascript
// 假设数据如下
var data = [
[ '2021-01-01', 100 ],
[ '2021-01-02', 110 ],
[ '2021-01-03', 105 ],
// ...
];
// 初始化ECharts实例
var chart = echarts.init(document.getElementById('chart'), 'macarons');
// 配置选项
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'line'
}]
};
// 渲染图表
chart.setOption(option);
```
其中,`tooltip`选项中的`axisPointer`设置为`cross`表示启用十字星交叉展示。`xAxis`和`yAxis`分别设置为时间轴和数值轴,`series`中的`data`表示要展示的数据,`type`表示图表类型。
最后,通过调用`setOption`方法渲染图表。
阅读全文