前言
之前项目中图表一直使用的是 ant design echarts
,但是由于 antV
的图表不兼容 CSS transform: 'scale'
缩放属性;项目是通过 scale
缩放实现不同比例适配, scale
属性会导致图表的图例等焦点位置错误;转而使用 echarts
;
一.下载 echarts
1.echarts下载
npm install echarts --save
2.在React框架中使用,必须还要下载一个echarts-for-react 库:
npm install echarts-for-react --save
二.代码应用
import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
const Echarts = (props) => {
const chartRef = useRef()
const options = {
title: {
text: "柱状图"
},
tooltip: {
trigger: 'axis'
},
// 图例组件
legend:{
data:['销量'],
show:true
},
// x轴
xAxis: {
type: 'category',
data: ['冬瓜', '茄子', '丝瓜', '玉米', '红薯', '西红柿', '芹菜']
},
// y轴
yAxis: {
type: 'value'
},
series: [{
data: [20, 9, 39, 43, 60, 18, 50],
type:'bar', // 柱状图
name:'销量'
}]
}
useEffect(() => {
// 创建一个echarts实例,返回echarts实例。不能在单个容器中创建多个echarts实例
const chart = echarts.init(chartRef.current)
// 设置图表实例的配置项和数据
chart.setOption(options)
// 组件卸载
return () => {
// myChart.dispose() 销毁实例。实例销毁后无法再被使用
chart.dispose()
}
},[])
return(
// 把图表封装单独放入一个组件中
<div style={{width: "100%", height: "100%"}} ref={chartRef}></div>
)
}
export default Echarts