最近在项目中使用到Echarts图表库,今天来分享一下我是如何使用Echarts图表库的。
Echarts官网地址: https://echarts.apache.org/zh/index.html.
1.通过npm获取 ECharts:
npm install echarts --save
2.引入Echarts
// 引入 ECharts 主模块
import echarts from 'echarts';
3.创建一个柱状图
import React from 'react';
import styles from './styles.less';
import {
connect } from 'dva';
import DeckGL from 'deck.gl';
// import { TripsLayer } from '@deck.gl/layers';
import {
TripsLayer } from '@deck.gl/geo-layers';
import {
IconLayer, PathLayer, PolygonLayer, LineLayer } from '@deck.gl/layers';
import icon1 from '@/assets/wenbrigadeimages/icon1.png';
import icon2 from '@/assets/wenbrigadeimages/icon2.png';
import icon3 from '@/assets/wenbrigadeimages/icon3.png';
import icon4 from '@/assets/wenbrigadeimages/icon4.png';
import liBird from '@/assets/bird/icon1.png';
import router from 'umi/router'
// import EchartsComponents from './components/echarts/index'
// let echartEntity = new EchartsComponents();
// 引入 ECharts 主模块
import echarts from 'echarts';
const ICON_MAPPING = {
marker: {
x: 0, y: 0, width: 4, height: 4, mask: true }
};
var thisSocket = null;
function mapStateToProps({
ContingencyModel, globalMapModel }) {
return {
ContingencyModel: ContingencyModel,
globalMapModel: globalMapModel,
};
}
@connect(mapStateToProps)
class OneList extends React.Component {
constructor(props) {
super(props);
this.state = {
oneList: {
title: {
text: '',
subtext: '(出现次数)',
textStyle: {
color: '#fff',
//字体风格,'normal','italic','oblique'
fontStyle: 'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight: 'bold',
//字体系列
fontFamily: 'sans-serif',
//字体大小
fontSize: 20
},
rich: {
},
subtextStyle: {
color: 'rgba(255,255,255,.8)',
}
},
grid: {
left: '3%', //组件离容器左侧的距离
right: '4%',
bottom: '0%',
containLabel: true //grid 区域是否包含坐标轴的刻度标签
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['6.00-18.00', '20.00-5.00'],
top: '30px',
right: '0',
textStyle: {
color: 'rgba(255,255,255,.8)',
//字体风格,'normal','italic','oblique'
fontStyle: 'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight: 'bold',
//字体系列
fontFamily: 'sans-serif',
},
},
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5', '6',