0.1.0 • Published 2 years ago
simple-echarts v0.1.0
SimpleEcharts
import echats & simple-echarts
import Loadable from 'react-loadable';
import { LineChart, BarChart, PieChart } from SimpleEcharts;
const ReactEcharts = Loadable({
loader: () => import('echarts-for-react'),
loading() {
return <div className="jz-loading-charts">加载中</div>;
},
});折线图
<LineChart {...options}>
<ReactEcharts
style={{ width: '600px', height: '420px'}}
/>
</LineChart>柱状图
<BarChart {...options}>
<ReactEcharts
style={{ width: '600px', height: '420px' }}
/>
</BarChart>饼图
<PieChart {...options}>
<ReactEcharts
style={{ width: '600px', height: '420px' }}
/>
</PieChart>options 示例
折线图
export const options = {
theme: { color: 'black' },
legend: true,
xAxis: {
name: '日期',
data: [
'星期一',
'星期二',
'星期三',
'星期四',
'星期五',
'星期六',
'星期日',
],
},
yAxis: {
name: '浏览量',
},
series: [
{
name: 'UV',
data: [2, 4, 7, 8, 11, 12, 15],
},
{ name: 'PV', data: [100, 120, 137, 190, 165, 197, 305] },
],
};柱状图
import * as echarts from 'echarts';
const areas = [
'东城区',
'西城区',
'朝阳区',
'海淀区',
'丰台区',
'石景山区',
'门头沟区',
'房山区',
'通州区',
'顺义区',
'大兴区',
'昌平区',
'平谷区',
'怀柔区',
'密云区',
'延庆区',
];
export const option1 = {
legend: true,
theme: { color: 'black', axisColor: '#93C7FF', lineColor: '#ddd' },
// tooltip: {
// formatter: function(params) {
// let dataIndex = params[0].dataIndex
// return `${params[0].name}<br/> // 计划：${greenData.planDatas[dataIndex]}<br/> // 完成：${greenData.datas[dataIndex]}<br/> // 超额：${greenData.overDatas[dataIndex]} //`
// }
// },
xAxis: {
data: areas,
},
yAxis: {
name: '完成任务（亩）',
showSpLine: false,
min: 0,
max: 4000,
},
series: [{
name: '完成任务',
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: 'rgba(175,238,238,1)',
},
{
offset: 1,
color: 'rgba(0,206,209,1)',
}
]),
data: [
'0.0',
'0.0',
'2524.61',
'388.5',
'894.6',
'239.46',
'82.17',
'140.0',
'3003.0',
'253.8',
'932.0',
'4303.0',
'33.0',
'113.4',
'131.6',
{ // 特殊值变颜色
value: 2000,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: 'rgba(245,245,220,1)',
},
{
offset: 1,
color: 'rgba(255,255,0,1)',
}
])
}
}
]
}]
}export const option2 = {
legend: true,
theme: { color: 'black', axisColor: '#93C7FF' },
//position: { right: 25, left: 5, bottom: 15 },
xAxis: {
data: ['2012', '2013', '2014', '2015', '2016'],
},
yAxis: {
showSpLine: false
},
series: [
{
name: 'Forest',
data: [320, 332, 301, 334, 390],
},
{
name: 'Steppe',
data: [220, 182, 191, 234, 290],
},
{
name: 'Desert',
data: [150, 232, 201, 154, 190],
},
{
name: 'Wetland',
data: [98, 77, 101, 99, 40],
}
]
};export const option3 = {
legend: true,
theme: { color: 'black', axisColor: '#93C7FF' },
//position: { right: 25, left: 5, bottom: 15 },
xAxis: {
data: ['2012', '2013', '2014', '2015', '2016'],
},
yAxis: {
showSpLine: false,
},
series: [
{
name: 'Email',
stack: 'Ad',
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Union Ads',
stack: 'Ad',
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: 'Video Ads',
stack: 'Ad',
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: 'Search Engine',
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
// 要有最高最低值
markLine: {
lineStyle: {
type: 'dashed',
},
data: [[{ type: 'min' }, { type: 'max' }]],
},
},
],
};export const option4 = {
legend: true,
theme: { color: 'red', axisColor: '#93C7FF', lineColor: '#ddd' },
// position: { right: 25, left: 5, bottom: 15 },
tooltip: {
// formatter: function(params) {},
},
xAxis: {
type: 'value',
name: '任务量',
showSpLine: true,
},
yAxis: {
type: 'category',
data: areas,
showSpLine: false,
},
series: [
{
name: '完成任务',
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: 'rgba(175,238,238,1)',
},
{
offset: 1,
color: 'rgba(0,206,209,1)',
},
]),
data: [
'0.0',
'0.0',
'-2524.61',
'388.5',
'894.6',
'239.46',
'82.17',
'140.0',
'3003.0',
'253.8',
'932.0',
'4303.0',
'33.0',
'113.4',
'131.6',
// 特殊值变颜色
{
value: 2000,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: 'rgba(245,245,220,1)',
},
{
offset: 1,
color: 'rgba(255,255,0,1)',
},
]),
},
},
],
},
],
};export const option5 = {
legend: true,
theme: { color: 'blue', axisColor: '#93C7FF' },
// position: { right: 25, left: 5, bottom: 15 },
xAxis: {
data: ['2012', '2013', '2014', '2015', '2016'],
},
yAxis: {
showSpLine: false,
},
series: [
{
name: 'Steppe',
type: 'line',
data: [220, 182, 191, 234, 290],
},
{
name: 'Desert',
data: [150, 232, 201, 154, 190],
},
{
name: 'Wetland',
data: [98, 77, 101, 99, 40],
},
],
};饼图
export const pieOption1 = {
legend: false,
series: [
{
name: 'Access From',
radius: '60%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
};export const pieOption2 = {
legend: false,
series: [
{
name: 'Access From',
radius: ['40%', '60%'],
itemRadius: 10,
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
},
],
};export const pieOption3 = {
legend: true,
series: [
{
name: 'Access From',
radius: [0, '35%'],
label: {
position: 'inner',
fontSize: 14,
},
data: [
{ value: 1048, name: 'Baidu' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
],
},
{
name: 'Access From',
radius: ['45%', '60%'],
data: [
{ value: 1048, name: 'Baidu' },
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 251, name: 'Google' },
{ value: 234, name: 'Union Ads' },
{ value: 147, name: 'Bing' },
{ value: 102, name: 'Others' },
],
},
],
};0.1.0
2 years ago