005-ant design -结合echart
原因:
ant design本省提供图标组件,是基于 BizCharts ,但是使用有些限制比如:TimelineChart带有时间轴的图表。使用 TimelineChart
组件可以实现带有时间轴的柱状图展现,而其中的 x
属性,则是时间值的指向,默认最多支持同时展现两个指标,分别是 y1
和 y2
。
想要展示多于两个K线则不能实现。
一、安装
npm install echarts --save
实例地址:http://echarts.baidu.com/examples/
二、使用:
import React, { Component } from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
class EchartsTest extends Component {
componentDidMount() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
}
render() {
return (
<div id="main" style="{{" width:="" 400,="" height:="" 400="" }}=""></div>
);
}
}
export default EchartsTest;
005-ant design -结合echart的更多相关文章
- ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...
- Ant Design 的一个练习小Demo
Ant Design 由蚂蚁金服团队出品, 基于 React 的组件化开发模式,封装了一套丰富而实用的 UI 组件库. 在这个练习Demo 中,按照 Ant Design 官网的教程示例,尝试使用 A ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- Ant Design UI组件
Ant Design 是面向中台的 UI 设计语言. http://ant.design/
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验 最近需要讲AntD Pro项目(以 ...
- button样式篇一(ant Design React)
这篇来介绍button中elementUi.iview.ant中样式结构 ant Design react ant-react中button分两个文件less: mixins.less:根据butto ...
- elementUi、iview、ant Design源码button结构篇
在看elementUI的button组件的时候,一起和iview.ant Design的button组件比 较功能.样式.代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功 ...
- 使用selenium操作ant design前端的页面,感觉页面没加载完
因需要收集页面数据,遂准备使用selenium爬取瓦斯阅读页面, 瓦斯网站使用的是ant design,元素定位非常困难,页面元素都没有ID,现在还只是能做到操作登录,不能自动打开订阅,查询某公众号, ...
- 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法
先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
随机推荐
- CSS使用学习总结
尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类 <div class=”News”> <h3></h3> <h2></h ...
- 一个牛人给Java初学者的建议
学习Java的同学注意了!!! 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入Java学习交流群,群号码:618528494 我们一起学Java! 给初学者之一:浅谈Java及应用学java ...
- Unity5.4新版AssetBundle资源打包
(1)新版本 唯一打包API Buildpipeline.BuildAssetBundle (2)在资源的Inpector界面最下方可设置该资源的assetbundleName, 每个assetbun ...
- [转]wcout输出中文却不显示出来
准备使用UNICODE来写个控制台测试程序发现,cout无法输出UNICODE的中文字符.查找C++标准看到,其提供了wcin.wcout.wcerr.wclog用于处理wchar_t字符的输入输出. ...
- 【转自IT虾米网:www.itxm.net】外部应用和drools-wb6.1集成解决方案
一.手把手教你集成外部应用和drools workbench6.1 1. 首先按照官方文档安装workbench ,我用的是最完整版的jbpm6-console的平台系统,里面既包含j ...
- php 实现 java com.sun.org.apache.xml.internal.security.utils.Base64 Byte数组加密
<?php function java_base64_encode($arr){ $str = ''; foreach ($arr as $key => $value) { $str .= ...
- 未配置jdk环境变量,cmd环境能运行java -version命令
我的情况是C:\Windows\System32路径下有java.exe.javaw.exe.javaws.exe三个文件,将三个文件删除后配置自己的jdk环境变量 可能原因参考帖子:https:// ...
- Websphere停止服务不用输入账号密码
启用了安全性的WebSphere Application Server,在日常维护中经常在停止服务的时候需要输入用户名和密码.停止的方式如下:[root@was /]# /opt/IBM/WebSph ...
- NUC972学习历程之NUWRITER使用说明以及烧录模式的说明
3.1 簡介Nu-Writer 工具能幫助使用者透過 USB ISP模式, 將Image檔案放入儲存體中, 例如:SPI Flash設備或 NAND Flash設備.3.2 驅動程式安裝Nu-Writ ...
- 开始iOS 7中自动布局教程(一)
本文转载至 http://www.cocoachina.com/industry/20131203/7462.html 到目前为止,如果你的设计相当的复杂,那么你必须编写大量的代码来适应这样的布局.你 ...