使用react+echarts实现K线图的效果
```jsx
import React, { Component } from 'react';
import echarts from 'echarts/lib/echarts'; //必须
import 'echarts/lib/chart/candlestick'; // 引入K线图组件
// 引入提示框和title组件，图例
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
class Kline extends Component {
componentDidMount() { //初始化渲染图表
let myChart = echarts.init(document.getElementById('main'));
let option = { //指定图表的配置项和数据
title: { text: 'K 线图' },
tooltip : { trigger: 'axis', axisPointer :{ type :'shadow'}},
legend:{ data:[{name:'日K',icon:'circle'}]},
xAxis:{ data: ["Mon","Tue","Wed","Thu","Fri"] },
yAxis:{ type:'value', scale:true, boundaryGap:[0.01,0.01] },
series:[{ name:"日K", type:"candlestick", data:[ [2320.26,2295.3,2300,2298.35], [2300,2291.3,2308.38,2295.35], [2297.94,2305.21091927368325], [2306.7835192736832],[2310]] }] }; myChart .setOption(option); } render(){ return ( <div> <div id="main" style={{ width: 400px; height: 400px }}></div> </div> ); }} export default Kline; ```
创作工场
免责声明：
以上内容除特别注明外均来源于网友提问，创作工场回答，未经许可，严谨转载。
点击这里>>使用🔥专业版，更聪明、更完整、更原创！