| (4)、React中使用ECharts | 您所在的位置：网站首页 › echarts饼图图例 › (4)、React中使用ECharts |
|
一、饼图实例
1、代码如下：
import React, { Component } from 'react'
import { Card } from 'antd'
// import echarts from 'echarts'
//按需导入
// import echartTheme from '../echartTheme'
import echarts from 'echarts/lib/echarts'
//导入饼图
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import ReactEcharts from 'echarts-for-react'
//引入样式
import '../common.less'
export default class PieA extends Component {
// componentWillMount(){
// echarts.registerTheme("Imooc", echartTheme) //注入主题
// }
getOption = ()=>{
let option = {
title: {
text: '用户订单',
x: 'center'
},
tooltip : {
trigger: 'item',
//提示框浮层内容格式器，支持字符串模板和回调函数形式。
formatter: "{a} {b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
top: 20,
right: 5,
data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
},
series : [
{
name:'订单量',
type:'pie',
data:[
{value:1000, name:'星期一'},
{value:1500, name:'星期二'},
{value:2000, name:'星期三'},
{value:2500, name:'星期四'},
{value:3000, name:'星期五'},
{value:2300, name:'星期六'},
{value:1600, name:'星期日'}
],
}
]
}
return option;
}
render() {
return (
)
}
}
（1） legend: 图例组件。图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。 --- orient (string)：图例列表的布局朝向。可选：'horizontal'、'vertical'(默认：'horizontal' )； --- data[i] (object)：图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 '\n'（换行字符串）用于图例的换行。 如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。 如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 nam 示例： data: [{ name: '系列1', // 强制设置图形为圆。 icon: 'circle', // 设置文本为红色 textStyle: { color: 'red' } }] 2、效果图： 二、环形图实例 1、代码如下： import React, { Component } from 'react' import { Card } from 'antd' // import echarts from 'echarts' //按需导入 // import echartTheme from '../echartTheme' import echarts from 'echarts/lib/echarts' //导入饼图 import 'echarts/lib/chart/pie' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/title' import 'echarts/lib/component/legend' import 'echarts/lib/component/markPoint' import ReactEcharts from 'echarts-for-react' //引入样式 import '../common.less' export default class PieB extends Component { // componentWillMount(){ // echarts.registerTheme("Imooc", echartTheme) //注入主题 // } getOption = ()=>{ let option = { title: { text: '用户订单', x: 'center' }, tooltip : { trigger: 'item', formatter: "{a} {b} : {c} ({d}%)" }, legend: { orient: 'vertical', top: 20, right: 5, data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'] }, series : [ { name:'订单量', type:'pie', radius: ['30%', '80%'], data:[ {value:1000, name:'星期一'}, {value:1500, name:'星期二'}, {value:2000, name:'星期三'}, {value:2500, name:'星期四'}, {value:3000, name:'星期五'}, {value:2300, name:'星期六'}, {value:1600, name:'星期日'} ], } ] } return option; } render() { return ( ) } } 2、效果图：更多饼图实例信息请参考ECharts：https://www.echartsjs.com/examples/#chart-type-pie |
| CopyRight 2018-2019 实验室设备网 版权所有 |