Ant Design引入Echarts

1.首先在Ant Design项目上安装echarts相关的包

2.在项目里就可以引入相关的包了

3.示例代码

4. 运行结果

1.首先在Ant Design项目上安装echarts相关的包

进入ant-design-pro目录，比如我的：/Users/rongsong/Downloads/ant-design-pro-1

终端执行以下命令：

npm install echarts --save
npm install echarts-for-react --save

2.在项目里就可以引入相关的包了

import ReactEcharts from 'echarts-for-react';//引入echarts主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入标题和提示框
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

3.示例代码

import React from 'react';
import ReactEcharts from 'echarts-for-react';//引入echarts主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入标题和提示框
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
// 引入图表卡片
import {ChartCard} from '../../components/Charts';var dataSet=[10,15,30,20];export default class Echart extends React.Component {constructor(props) {super(props);}componentDidMount=()=>{// 图表显示容器let el=document.getElementById("main");// 图表初始化let myChart=echarts.init(el);setInterval(()=>{var dataSet1=dataSet.map(function(ele){return Math.random(20)*ele;})// 图表配置项let option={title:{text:'柱状图',subtext:'销量统计'},xAxis:{data:["河北","河北","山西","广州"]},yAxis:{gridIndex:0,min:0,max:30,interval:5},series:[{name:'销量',type:'bar',data:dataSet1}],legend:{show:true,data:[{name:'销量',icon:'circle'}]}}       // 进行图表配置myChart.setOption(option);},1000);}render() {return (<div><div id="main" style={{width:'80%',height:400}}></div></div>);}
}

4.运行结果

Ant Design引入Echarts相关推荐

Ant design pro引入Echarts报错：TypeError: Cannot read property 'x_data' of undefined
目录 (1)报错:TypeError: Cannot read property 'x_data' of undefined (2)报错:× Error: Component series.line ...
Ant Design Pro引入Echarts 报错Unexpected token
想要在ant design pro中引入echart,发现在网上找了很多示例直接运行不通过,可能需要更改下部分格式,比如直接引用下面链接中的代码就会报错:Unexpected token, https ...
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
在Ant Design Pro（React）中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架,而ECharts是前端最流行,功能最强大的前端图表库. 下面将讲解下如何在Ant Design Pro使用ECharts. Ant Des ...
ant design pro 菜单图标引入问题 iconfontUrl inconfont图标本地
ant design pro 菜单栏使用图标官网使用inconfont图标,推荐使用inconfont官网的线上地址查看地址:https://pro.ant.design/zh-CN/docs/n ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
Ant Design of Angular---NG ZORRO引入样式上的问题
Ant Design of Angular-NG ZORRO 支持 Angular 版本 ng-zorro-antd 与 @angular/core 保持相同的主版本号,目前支持 Angular ^1 ...
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3 UI组件库 Ant Design of Vue Ant Design Vue
Ant Design Charts绘制中国地图并动态添加标记点
绘制中国地图并动态添加标记点,在这里使用的是antd charts绘制,需要求只显示中国地图,并且跟踪物流信息使用组件地址: 图表 - Plot | Ant Design Charts 这里的引入方 ...

Ant Design引入Echarts

1.首先在Ant Design项目上安装echarts相关的包

2.在项目里就可以引入相关的包了

3.示例代码

4.运行结果

Ant Design引入Echarts相关推荐

最新文章

热门文章