echart 图表实现
import { CSSProperties, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import Chart from '@/pages/components/Charts';
import { EChartsCoreOption } from 'echarts';
import ChartTitle from '../components/ChartTitle/chartTitle';
/**
* @description 给echart子组件公用借口
* @options echarts options配置与内部defaultOption合并 <a href='https://echarts.apache.org/zh/option.html#title'>点击跳转</>
* @seriesOptions 用于echart与内部seriesOption合并 <a href='https://echarts.apache.org/zh/option.html#series'>点击跳转</>
* @data series数据层
* @titleConfig 搭配tableList组件配置
* @style 父级元素的style样式
* @colors ehcart颜色
*/
interface EchartProps {
options?: EChartsCoreOption;
titleConfig?: any;
style?: CSSProperties;
data: Array<any>;
colors?: Array<any>
seriesOptions?: any
}
export default ({options, data, colors, titleConfig, style}: EchartProps) => {
const [lineOptions, setBarOptions] = useState<EChartsCoreOption | null>(null);
let defaultSeries: any = data.map((item,index) => {
let [c1, c2] = item.gradientColor;
return {
name: item.name,
type: 'line',
smooth: true, //是否平滑
symbolSize: 8,
showAllSymbol: true,
showSymbol: false, // 只有在 tooltip hover 的时候显示。
symbol: 'circle', //折线点设置为实心点
label: {
show: true,
position: 'left',
textStyle: {
color: c1,
fontSize: 20,
}
},
itemStyle: {
color: c1,
borderColor: "#fff",
borderWidth: 2,
shadowColor: "rgba(0, 0, 0, .3)",
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: c2,
},
{
offset: 1,
color: c1,
},
],
false
),
},
},
color: c1,
data: item.data,
};
});
useEffect(() => {
let defalutOptions: EChartsCoreOption;
defalutOptions = {
tooltip: {
trigger: 'axis',
showContent: false, // 是否显示提示框浮层，默认显示。
axisPointer: {
lineStyle: {
color: '#fff',
width: 2,
type: 'soild',
shadowColor: 'rgba(255, 255, 255, 0.5)',
shadowBlur: 100,
shadowOffsetX: 10
},
},
},
legend: {
orient: 'horizontal', // 水平
top: 30,
right: 90,
align: 'right',
itemWidth: 16,
itemHeight: 16,
borderWidth: 0,
icon: 'roundRect',
textStyle: {
fontSize: 14,
color: '#ddd',
fontFamily: 'PingFangSC-Regular',
fontWeight: 400,
},
},
grid: {
// top: '5%',
// left: '5%',
// right: '15%',
// bottom: '15%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['202101', '202102', '202103', '202104', '202105', '202106'],
axisLine: {
onZero: false,
minInterval: 1,
lineStyle: {
type: 'solid',
color: '#4E91A3',
width: 2,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
},
},
axisTick: {
show: false,
},
offset: 5,
axisLabel: {
color: '#ccc',
},
splitLine: {
show: true,
lineStyle: {
color: ['#22343C'],
width: 1,
type: 'dashed',
},
},
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
interval: 0,
textStyle: {
baseline: 'middle',
color: '#ccc',
},
},
axisLine: {
minInterval: 1,
lineStyle: {
type: 'solid',
color: '#ccc',
with: 1,
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#22343C'],
width: 1,
type: 'dashed',
},
},
},
series: defaultSeries
};
if(options){
defalutOptions = Object.assign(defalutOptions,options)
}
setBarOptions(defalutOptions);
}, [options]);
return (
<div style={{ display: 'flex', flexDirection: 'column' }}>
{titleConfig && Object.keys(titleConfig).length ? (
<ChartTitle
title={titleConfig.title}
typeClass={titleConfig.typeClass}
/>
) : null}
<Chart
options={lineOptions}
height={style?.height || 430}
width={style?.width || 960}
/>
</div>
);
};
// 玫瑰图 import * as echarts from 'echarts'; import { echarOptsMerge } from '../utils'; import { EChartsCoreOption } from 'echarts'; /** * @options echarts options配置与内部defaultOption合并 <a href='https://echarts.apache.org/zh/option.html#title'>点击跳转</> * @data series数据层 * @titleConfig 搭配tableList组件配置 * @style 父级元素的style样式 */ interface IEchartProps { options?: EChartsCoreOption; data: { name: string; value: Array<number>; }; } export default ({ options, data }: IEchartProps) => { // 根据传入的数据获取最大值范围 let max = data.value[0]; let maxlen: any = max.toString().length; let baseOptions: EChartsCoreOption = { angleAxis: { max: '1'.padEnd(maxlen + 1, '0'), clockwise: false, show: false, }, animation: false, radiusAxis: { type: 'category', show: true, axisLabel: { show: false, }, axisLine: { show: false, }, axisTick: { show: false, }, }, polar: [ { center: ['50%', '50%'], //中心点位置 radius: ['50%', '70%'], }, ], series: [ { stack: '外层圆环', type: 'bar', data: data.value, showBackground: false, coordinateSystem: 'polar', barWidth: 50, silent: true, zlevel: 3, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 1, color: '#56FDFF', }, { offset: 0, color: '#06BDBF', }, ]), shadowColor: 'rgba(255,255,255,.8)', shadowBlur: 20, shadowOffsetX: 0, shadowOffsetY: 0, }, }, { type: 'pie', name: '内层细圆环', center: ['40%', '50%'], radius: ['50%', '60%'], hoverAnimation: false, clockWise: true, itemStyle: { color: '#FFD18A', shadowColor: 'rgba(255,255,255,.6)', shadowBlur: 13, shadowOffsetX: 0, shadowOffsetY: 0, }, tooltip: { show: false, }, label: { formatter: data.name, position: 'center', show: true, textStyle: { fontSize: 15, fontWeight: 'normal', color: '#fff', }, }, data: [100], }, ], }; if (options) { baseOptions = Object.assign(baseOptions, options); } return baseOptions; };
// 饼图 import { EChartsCoreOption } from 'echarts'; import { echartsOpts } from './echarts.d'; import * as echarts from 'echarts'; export default ({ options, data, config }: echartsOpts) => { let color = options?.color || [ '#4D8BE8', '#1785D6', '#A4F2EE', '#80EFFF', '#5FD1EB', '#F5855F', '#C099FC', '#FFA940', '#F8AEA4', ]; let formatter = options?.formatter || function (e: any) { let { data: { value = '', name = '', percent = '' }, } = e; return `{border|}{top| ${percent}} \n {center|${value}} \n {bottom|${name}}`; }; let seriesData: any = []; // 算出总数，插入间距 let sum: any = data.reduce((prev, cur) => prev + cur.value, 0); const gap = Math.round((1 * sum) / 150); data.map((item, index) => { seriesData.push( { itemStyle: { normal: { //外环发光 borderWidth: 0.5, shadowBlur: 10, // @ts-ignore borderColor: color[index], // @ts-ignore shadowColor: color[index], }, }, ...item, }, { value: gap, name: '', label: { show: false, }, itemStyle: { normal: { color: 'rgba(0, 0, 0, 0)', borderColor: 'rgba(0, 0, 0, 0)', borderWidth: 0, }, }, }, ); }); let baseOptions: EChartsCoreOption = { legend: { show: false, }, color, label: { formatter, minMargin: 2, lineHeight: 15, rich: { border: { width: 4, height: 30, backgroundColor: 'inherit', shadowBlur: 18, shadowColor: 'rgba(255,255,255.2)', borderRadius: 5, verticalAlign: 'top', }, top: { fontSize: 12, color: '#fff', align: 'left', width: '120%', verticalAlign: 'top', padding: [0, 0, 0, 3], }, center: { fontSize: 18, width: '120%', align: 'left', color: '#fff', verticalAlign: 'top', padding: [0, 0, 0, 3], }, bottom: { fontSize: 12, width: '120%', align: 'left', color: '#fff', verticalAlign: 'bottom', padding: [0, 0, 0, 3], }, }, }, series: [ { name: '饼图', type: 'pie', radius: ['20%', '40%'], labelLine: { lineStyle: { // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // { // offset: 0, // color: "rgba(255, 255, 255,0.7)", // }, // { // offset: 1, // color: "rgba(255, 255, 255,0.4)", // }, // ]), width: 2, }, }, data: seriesData, }, { name: '左侧线', type: 'custom', coordinateSystem: 'none', renderItem: function (params: any, api: any) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.43, // 180, startAngle: (150 * Math.PI) / 360, endAngle: (300 * Math.PI) / 180, }, style: { stroke: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(255,234,190,0)', }, { offset: 0.3, color: 'rgba(255,209,138,.5)', }, { offset: 1, color: 'rgba(255,234,190,0)', }, ]), fill: 'transparent', lineWidth: 2, shadowBlur: 10, shadowOffsetX: 10, shadowOffsetY: 10, }, silent: true, }; }, data: [0], }, { name: '右侧侧线', type: 'custom', coordinateSystem: 'none', renderItem: function (params: any, api: any) { return { type: 'arc', shape: { cx: api.getWidth() / 2, cy: api.getHeight() / 2, r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.46, // 180, startAngle: (-130 * Math.PI) / 360, endAngle: (150 * Math.PI) / 360, }, style: { stroke: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(255,234,190,0)', }, { offset: 0.3, color: 'rgba(0,255,255,.5)', }, { offset: 1, color: 'rgba(255,234,190,0)', }, ]), fill: 'transparent', lineWidth: 2, shadowBlur: 10, shadowOffsetX: 10, shadowOffsetY: 10, }, silent: true, }; }, data: [0], }, ], }; if (options) { baseOptions = Object.assign(baseOptions, options); } return baseOptions; };
import { echarOptsMerge } from '../utils';
import { EChartsCoreOption } from 'echarts';
import { echartsOpts } from './echarts.d';
export default ({ options, data, config }: echartsOpts) => {
const baseOptions: EChartsCoreOption = {
title: {
subtext: '单位：家',
right: 0,
top: 15,
subtextStyle: {
color: '#DDDDDD',
},
},
grid: {
left: '3%',
right: '4%',
bottom: '0%',
},
legend: {
top: 20,
left: 0,
align: 'right',
itemWidth: 15,
itemHeight: 15,
borderWidth: 0,
icon: 'roundRect',
},
tooltip: {
show: false,
},
xAxis: {
type: 'value',
axisLabel: {
show: false,
},
},
yAxis: {
nameTextStyle: {
fontSize: 14,
color: '#ddd',
fontFamily: 'PingFangSC-Regular',
fontWeight: 400,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
interval: 0,
textStyle: {
baseline: 'middle',
color: '#ccc',
},
},
axisLine: {
show: false,
minInterval: 1,
lineStyle: {
type: 'solid',
color: '#ccc',
with: 1,
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#22343C'],
width: 1,
type: 'dashed',
},
},
},
series: data.map((item) => {
let [c1, c2] = item.borderColor;
return {
type: 'bar',
name: item.name,
data: item.data,
barWidth: item.barWidth,
itemStyle: {
barBorderRadius: item.barBorderRadius || [4, 4, 0, 0],
borderWidth: 2,
borderType: 'solid',
color: item.color,
shadowBlur: item.shadowBlur || 10,
shadowOffsetX: item.shadowOffsetX || 0,
shadowOffsetY: item.shadowOffsetY || 0,
shadowColor: c2,
borderColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
...item.borderColorPosition,
colorStops: [
{
offset: 0,
color: c1, // 0% 处的颜色
},
{
offset: 1,
color: c2, // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
label: {
show: true,
color: '#fff' || item.labelColor,
textShadowColor: 'rgba(54,186,255,0.96)',
textShadowBlur: 8,
fontWeight: 600,
fontSize: 14,
position: item.labelPosition || 'top',
},
};
}),
};
if (options) {
baseOptions = Object.assign(baseOptions, options);
}
return baseOptions;
};
传入数据
// 区域对比图 const [areaOption, setAreaOption] = useState<EChartsCoreOption | null>(null); const getAreaData: Array<IAreaData> = [ { value: 6250, name: '网络与通信产业集群', }, { value: 5500, name: '半导体与集成电路产业集群', }, { value: 4362, name: '超高清视频显示产业集群', }, { value: 4500, name: '智能终端产业集群', }, { value: 1800, name: '软件与信息服务产业集群', }, { value: 4100, name: '数字创意产业集群', }, { value: 3800, name: '现代时尚产业集群', }, { value: 2300, name: '工业母机产业集群', }, { value: 2500, name: '智能机器人产业集群', }, { value: 2900, name: '其他', }, ]; // @ts-ignore getAreaData.sort((a, b) => a.value - b.value); let dataName = getAreaData.map((v) => v.name); const areaOneData: Array<any> = [ { name: '宝安区', data: getAreaData, color: '#56FDFF', borderColor: ['#06BDBF', '#56FDFF'], labelPosition: 'right', barWidth: 18, barBorderRadius: [0, 4, 4, 0], borderColorPosition: { x2: 1, y2: 0, }, }, ]; const areaTwoData: Array<any> = [ { name: '福田区', data: getAreaData, color: '#FFD18A', borderColor: ['#FFD18A', '#FFA213'], labelPosition: 'right', barWidth: 18, barBorderRadius: [0, 4, 4, 0], borderColorPosition: { x2: 1, y2: 0, }, }, ];
useEffect(() => {
let option: EChartsCoreOption;
option = {
yAxis: {
type: 'category',
name: '',
data: dataName,
axisLabel: {
padding: [0, 0, 10, -10],
margin: 10,
inside: true,
textStyle: {
fontSize: 12,
fontFamily: 'PingFangSC-Semibold',
fontWeight: 600,
color: '#fff',
align: 'left',
},
width: 350,
overflow: 'truncate',
formatter: '{value}\n{a|占位}',
rich: {
a: {
color: 'transparent',
lineHeight: 22,
fontFamily: 'digital',
fontSize: 20,
shadowColor: 'rgba(0, 0, 0, 1)',
shadowBlur: 10,
},
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
};
setAreaOption(option);
}, []);
