react+echart 体验基本图标展示
2017-09-25 14:34
120 查看
/**
* Created by wangyan on 2017/2/22.
*/
import React from "react";
import echarts from 'echarts';
import $ from 'jquery';
import '../../../node_modules/echarts/map/js/china';
import '../../../node_modules/echarts/map/js/province/beijing';
export default class Home extends React.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>
);
}
}
* Created by wangyan on 2017/2/22.
*/
import React from "react";
import echarts from 'echarts';
import $ from 'jquery';
import '../../../node_modules/echarts/map/js/china';
import '../../../node_modules/echarts/map/js/province/beijing';
export default class Home extends React.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>
);
}
}
相关文章推荐
- React基本组件之DropDown
- ARM的嵌入式Linux移植体验之基本概念
- BootStray表单控件 基本控件的使用 提示,图标的交互
- 超炫的jquery图像展示插件体验
- React-Native常用的几个基本类库
- React-Native 基本环境的搭建
- 从jQuery、Bootstrap到React、Semantic的体验
- React native 入门二 魅力展示
- react-native中listview获取豆瓣书本信息并展示出来
- React--基本组件
- React 入门,5个常用DEMO展示
- React-jsx、html、css基本知识点
- React几种基本配置方案
- BaiduMap---百度地图官方Demo之定位图层展示(介绍定位图层的基本用法)
- 关于最近流行的vuejs.angularjs,Reactjs等前端框架的简单对比及体验
- Echart 带坐标轴带图标的柱状图
- SilverXna初体验:基本游戏框架——古老的三段式
- React 组件基本使用(三) ---父子组件之间的通信
- React环境配置和基本使用
- ReactNative学习之:开发之图标库react-native-vector-icons