北京建设工程主管部门网站,电子商务网站建设报告怎么写,深圳市建设工程造价站官网,怎么建立自己的微信公众号文章目录 前言环境代码接口使用效果后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;react.js #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板。(如果出现错误#xff0c;… 文章目录 前言环境代码接口使用效果后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏react.js 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 环境 react版本^18.2.0 echarts版本^5.4.3 ts版本^6.0.0 代码
import * as echarts from echarts;import {useEffect} from react;
interface ChildProps {data: Option;
}
const View (props:ChildProps){useEffect((){const myChart echarts.init(document.getElementById(echarts))// eslint-disable-next-line typescript-eslint/ban-ts-comment// ts-ignoremyChart.setOption(props.data)},[])window.addEventListener(resize,(){const myChart echarts.init(document.getElementById(echarts))myChart.resize()})return (div idecharts style{{width:80vw,height:50vh }}/div)
}export default View;接口
interface Option{xAxis: {type: string;data: string[];};yAxis: {type: string;};series: {data: number[];type: string;}[];[key: string]: unknown;
}使用
// 导入
import Graph from /components/Graph
const View (){const option {tooltip: {trigger: axis,axisPointer: {// Use axis to trigger tooltiptype: shadow // shadow as default; can also be line or shadow}},legend: {},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},xAxis: {type: value},yAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},series: [{name: Direct,type: bar,stack: total,label: {show: true},emphasis: {focus: series},data: [320, 302, 301, 334, 390, 330, 320]},{name: Mail Ad,type: bar,stack: total,label: {show: true},emphasis: {focus: series},data: [120, 132, 101, 134, 90, 230, 210]},{name: Affiliate Ad,type: bar,stack: total,label: {show: true},emphasis: {focus: series},data: [220, 182, 191, 234, 290, 330, 310]},{name: Video Ad,type: bar,stack: total,label: {show: true},emphasis: {focus: series},data: [150, 212, 201, 154, 190, 330, 410]},{name: Search Engine,type: bar,stack: total,label: {show: true},emphasis: {focus: series},data: [820, 832, 901, 934, 1290, 1330, 1320]}]}return(div classNamesonPage1Graph data{option}/Graph/div)
}export default View;效果 后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
