import * as echarts from "echarts"; import {EChartsOption} from 'echarts' function Index(props:EChartsOption) { const echartsRef:any= useRef<HTMLElement>(); useEffect(() => { const myChart = echarts.init(echartsRef.current as HTMLElement); myChart.setOption(props.option as EChartsOption); }); return <div ref={echartsRef} style={{ width: "100%", height: "100%" }}></div>; } export default Index;
data
import {EChartsOption } from 'echarts' export const option:EChartsOption = { // 柱状图的颜色 color: ["#12ccee"], // 表的标题 title: { text: "2019 年度销量", subtext: "Sub Title", // 标题的位置 left: "center", top: "top", textStyle: { fontSize: 18, // 主标题文字的颜色。 color: "#ee33aa", }, subtextStyle: { fontSize: 12, // 主标题文字的颜色。 color: "#445533", } }, tooltip: { // 鼠标悬停柱状图是否有hover提示效果 show: true, // 在哪种类型触发 trigger: "axis", // 指示器类型。 // 'line' 直线指示器 // 'shadow' 阴影指示器 // 'none' 无指示器 // 'cross' 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。 axisPointer: { type: "cross" } }, // x轴的数据 xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, // y轴的数据 yAxis: {}, // 柱状图的数据name名字,类型bar,数据为data series: [{ name: "销量", // 折线图line,柱状图bar,饼状图pie type: "line", data: [10, 22, 93, 45, 44, 100] }] } as EChartsOption
标签:封装,指示器,EChartsOption,react,柱状图,echats,data,echarts,const From: https://www.cnblogs.com/zjxzhj/p/17474149.html