ECharts 快速使用

最终效果

使用介绍

echarts图表的绘制，大体分为三步：

1. 根据 DOM实例，通过 echarts.init方法，生成 echarts实例
2. 构建 options配置对象，整个echarts的样式，皆有该对象决定
3. 最后通过实例.setOption方法，设置配置对象配置对象是echarts中最复杂的部分，也就是核心。

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例const myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据const option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>

那么最难的 option 配置对象怎么看呢？这里我们可以跟着官方示例学习：echarts 示例，通过不断修改示例达到我们预期的效果。

还有一个难点，就是如果我们的配置写的不完全或者写的不对，是不能够看到部分效果的，也就是说，要么就是一张完整的图表，要么就是一张空白。

经过上述种种难点，我总结出一个使用 echarts 的好办法，结合 ChatGPT。

我们先向他描述图表的大致形状，然后让它先生成一个能够运行的图表，之后我们不断细化需求，进行更改。

比如：

我：我要使用 echarts 绘制一些图表，但是不知道相关代码配置怎么写，
我需要你按照我接下来的要求给出代码。
ChatGPT：xxx
我：我想绘制一张横向的柱形图，比如柱形图第一行 
坐标为华北，数据为20；第二行 坐标为 西北，数据为30 ；
代码应该怎么写？
ChatGPT：xxx
我：我不想要横坐标。
ChatGPT：xxx

最终生成：

总之就是这样，逐渐细化需求，直到完成我们的要求为止。

具体示例

这里可以先试用 tailwindcss 进行初始布局搭建。

tailwindcss 结合框架使用跟着文档就就可以。

基本布局

下面均使用 mock 数据。

index

function Index(props) {return (<divstyle={{backgroundImage: `url(${bgImage})`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width: '100%',height: '94vh',color: 'white',display: 'flex',overflow: 'hidden',padding: '5px',}}>{/*左*/}<div className="flex-1 mr-2 bg-opacity-50 bg-slate-800 p-3 flex flex-col">{/*    横向柱状图*/}<HorizontalBar className="h-1/3 box-border pb-4" />{/*    雷达图*/}<RadarBar className="h-1/3 box-border pb-4" />{/*    关系图*/}<Relation className="h-1/3" /></div>{/*中*/}<div className="w-1/2 mr-2 flex flex-col">{/*    数据总览图*/}<TotalData classNmae="bg-opacity-50 bg-slate-800 p-3 " />{/*    地图可视化*/}<MapChart classNmae="bg-opacity-50 bg-slate-800 p-3 mt-2 flex-1" /></div>{/*右*/}<div className="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">{/*    竖向柱状图*/}<VerticalBar className="h-1/3 box-border pb-4" />{/*    环形图*/}<RingBar className="h-1/3 box-border pb-4" />{/*    文档云图*/}<WordCloud className="h-1/3 " /></div></div>);
}

HorizontalBar

import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';function HorizontalBar(props) {const data = {regions: [{ id: 1, name: '华北', value: 63 },{ id: 2, name: '华南', value: 86 },{ id: 3, name: '华东', value: 85 },{ id: 4, name: '西南', value: 63 },{ id: 5, name: '西北', value: 54 },{ id: 6, name: '东北', value: 79 },],};// 1. 初始化 echarts 实例let myChart = null;const target = useRef(null);useEffect(() => {myChart = echarts.init(target.current);renderChart();}, []);// 2. 构建 options 配置对象const renderChart = () => {const options = {// x 轴展示数据xAxis: {// 不显示 x 轴show: false,// x 轴类型为数据进行展示type: 'value',// 设置 x 轴最大值max: function (value) {// 将 x 轴个数据中的的最大值 * 1.2 作为 x 轴的最大值return parseInt(value.max * 1.2);},},// y 轴展示数据yAxis: {// y 轴为类型数据展示type: 'category',// data 为所需展示的数据data: data.regions.map((item) => item.name), // 映射数据// 反向展示数据 默认情况从下到上展示数据inverse: true,// 不展示轴线axisLine: {show: false,},// 不展示刻度axisTick: {show: false,},axisLabel: {color: '#9eb1c8',},},// 图表位置 上下左右grid: {top: 0,right: 0,bottom: 0,left: 0,// 包含标签containLabel: true,},// 核心配置series: [{// 柱形图type: 'bar',// 展示数据data: data.regions.map((item) => ({name: item.name,value: item.value,})),showBackground: true,backgroundStyle: {color: 'rgba(180,180,180,0.2)',},// x 数据项样式itemStyle: {color: '#479AD3',barBorderRadius: 5,shadowColor: 'rgba(0,0,0,0.3)',// 阴影模糊shadowBlur: 5,},barWidth: 12,// x 上的字体标签label: {show: true,position: 'right',textStyle: {color: '#fff',},},},],};// 3. 根据数据构建 options 配置对象 myCharts.setOption(options)myChart.setOption(options);};return (<div className={props.className}><div>学生来源信息</div><div ref={target} className="w-full h-full"></div></div>);
}export default HorizontalBar;

MapChart

import mapJson from '@/assets/screen/MapData/china.json';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';function MapChart(props) {const data = {mapData: {categoryData: {2020: [{ name: '北京', value: 42 },{ name: '天津', value: 24 },{ name: '上海', value: 53 },{ name: '重庆', value: 64 },{ name: '河北', value: 87 },{ name: '河南', value: 52 },{ name: '云南', value: 14 },{ name: '辽宁', value: 35 },{ name: '黑龙江', value: 85 },{ name: '湖南', value: 95 },{ name: '安徽', value: 41 },{ name: '山东', value: 45 },{ name: '新疆', value: 56 },{ name: '江苏', value: 43 },{ name: '浙江', value: 56 },{ name: '江西', value: 63 },{ name: '湖北', value: 41 },{ name: '广西', value: 23 },{ name: '甘肃', value: 56 },{ name: '山西', value: 62 },{ name: '内蒙古', value: 64 },{ name: '陕西', value: 54 },{ name: '吉林', value: 34 },{ name: '福建', value: 16 },{ name: '贵州', value: 71 },{ name: '广东', value: 32 },{ name: '青海', value: 56 },{ name: '西藏', value: 52 },{ name: '四川', value: 63 },{ name: '宁夏', value: 74 },{ name: '海南', value: 51 },],2021: [{ name: '北京', value: 76 },{ name: '天津', value: 54 },{ name: '上海', value: 23 },{ name: '重庆', value: 64 },{ name: '河北', value: 54 },{ name: '河南', value: 52 },{ name: '云南', value: 34 },{ name: '辽宁', value: 35 },{ name: '黑龙江', value: 65 },{ name: '湖南', value: 95 },{ name: '安徽', value: 34 },{ name: '山东', value: 34 },{ name: '新疆', value: 56 },{ name: '江苏', value: 76 },{ name: '浙江', value: 23 },{ name: '江西', value: 65 },{ name: '湖北', value: 41 },{ name: '广西', value: 34 },{ name: '甘肃', value: 43 },{ name: '山西', value: 65 },{ name: '内蒙古', value: 64 },{ name: '陕西', value: 54 },{ name: '吉林', value: 98 },{ name: '福建', value: 76 },{ name: '贵州', value: 71 },{ name: '广东', value: 65 },{ name: '青海', value: 56 },{ name: '西藏', value: 43 },{ name: '四川', value: 63 },{ name: '宁夏', value: 54 },{ name: '海南', value: 51 },],2022: [{ name: '北京', value: 23 },{ name: '天津', value: 24 },{ name: '上海', value: 43 },{ name: '重庆', value: 64 },{ name: '河北', value: 65 },{ name: '河南', value: 52 },{ name: '云南', value: 14 },{ name: '辽宁', value: 35 },{ name: '黑龙江', value: 98 },{ name: '湖南', value: 95 },{ name: '安徽', value: 65 },{ name: '山东', value: 45 },{ name: '新疆', value: 56 },{ name: '江苏', value: 87 },{ name: '浙江', value: 65 },{ name: '江西', value: 63 },{ name: '湖北', value: 54 },{ name: '广西', value: 45 },{ name: '甘肃', value: 56 },{ name: '山西', value: 62 },{ name: '内蒙古', value: 64 },{ name: '陕西', value: 54 },{ name: '吉林', value: 23 },{ name: '福建', value: 16 },{ name: '贵州', value: 54 },{ name: '广东', value: 32 },{ name: '青海', value: 21 },{ name: '西藏', value: 52 },{ name: '四川', value: 43 },{ name: '宁夏', value: 32 },{ name: '海南', value: 51 },],2023: [{ name: '北京', value: 65 },{ name: '天津', value: 54 },{ name: '上海', value: 53 },{ name: '重庆', value: 64 },{ name: '河北', value: 23 },{ name: '河南', value: 52 },{ name: '云南', value: 43 },{ name: '辽宁', value: 35 },{ name: '黑龙江', value: 85 },{ name: '湖南', value: 95 },{ name: '安徽', value: 34 },{ name: '山东', value: 45 },{ name: '新疆', value: 56 },{ name: '江苏', value: 42 },{ name: '浙江', value: 56 },{ name: '江西', value: 63 },{ name: '湖北', value: 41 },{ name: '广西', value: 23 },{ name: '甘肃', value: 23 },{ name: '山西', value: 62 },{ name: '内蒙古', value: 64 },{ name: '陕西', value: 54 },{ name: '吉林', value: 34 },{ name: '福建', value: 43 },{ name: '贵州', value: 65 },{ name: '广东', value: 32 },{ name: '青海', value: 56 },{ name: '西藏', value: 52 },{ name: '四川', value: 76 },{ name: '宁夏', value: 43 },{ name: '海南', value: 51 },],2024: [{ name: '北京', value: 31 },{ name: '天津', value: 54 },{ name: '上海', value: 53 },{ name: '重庆', value: 64 },{ name: '河北', value: 33 },{ name: '河南', value: 52 },{ name: '云南', value: 54 },{ name: '辽宁', value: 42 },{ name: '黑龙江', value: 85 },{ name: '湖南', value: 95 },{ name: '安徽', value: 41 },{ name: '山东', value: 45 },{ name: '新疆', value: 56 },{ name: '江苏', value: 53 },{ name: '浙江', value: 56 },{ name: '江西', value: 43 },{ name: '湖北', value: 64 },{ name: '广西', value: 23 },{ name: '甘肃', value: 56 },{ name: '山西', value: 65 },{ name: '内蒙古', value: 64 },{ name: '陕西', value: 54 },{ name: '吉林', value: 34 },{ name: '福建', value: 54 },{ name: '贵州', value: 71 },{ name: '广东', value: 13 },{ name: '青海', value: 56 },{ name: '西藏', value: 52 },{ name: '四川', value: 23 },{ name: '宁夏', value: 74 },{ name: '海南', value: 51 },],},colors: ['#1DE9B6','#F46E36','#04B9FF','#5DBd32','#FFC809','#FB05D5','#BDA29A','#6E7074','#546570','#C4CCD3',],topData: {2020: [{name: '天津',value: [117.4219, 39.4189, 84.1],},{name: '河北',value: [114.4995, 38.1006, 85.8],},{name: '河南',value: [113.4668, 34.6234, 83.6],},{name: '北京',value: [116.4551, 40.2539, 83.2],},{name: '山东',value: [117.1582, 36.8701, 82.5],},{name: '安徽',value: [117.29, 32.0581, 81.7],},{name: '湖北',value: [114.3896, 30.6628, 81.4],},{name: '江苏',value: [118.8062, 31.9208, 81.1],},{name: '新疆',value: [87.9236, 43.5883, 80.4],},{name: '湖南',value: [113.0823, 28.2568, 80.1],},],2021: [{name: '天津',value: [117.4219, 39.4189, 84.1],},{name: '河北',value: [114.4995, 38.1006, 85.8],},{name: '河南',value: [113.4668, 34.6234, 83.6],},{name: '北京',value: [116.4551, 40.2539, 83.2],},{name: '山东',value: [117.1582, 36.8701, 82.5],},{name: '安徽',value: [117.29, 32.0581, 81.7],},{name: '湖北',value: [114.3896, 30.6628, 81.4],},{name: '江苏',value: [118.8062, 31.9208, 81.1],},{name: '新疆',value: [87.9236, 43.5883, 80.4],},{name: '湖南',value: [113.0823, 28.2568, 80.1],},],2022: [{name: '天津',value: [117.4219, 39.4189, 84.1],},{name: '河北',value: [114.4995, 38.1006, 85.8],},{name: '河南',value: [113.4668, 34.6234, 83.6],},{name: '北京',value: [116.4551, 40.2539, 83.2],},{name: '山东',value: [117.1582, 36.8701, 82.5],},{name: '安徽',value: [117.29, 32.0581, 81.7],},{name: '湖北',value: [114.3896, 30.6628, 81.4],},{name: '江苏',value: [118.8062, 31.9208, 81.1],},{name: '新疆',value: [87.9236, 43.5883, 80.4],},{name: '湖南',value: [113.0823, 28.2568, 80.1],},],2023: [{name: '天津',value: [117.4219, 39.4189, 84.1],},{name: '河北',value: [114.4995, 38.1006, 85.8],},{name: '河南',value: [113.4668, 34.6234, 83.6],},{name: '北京',value: [116.4551, 40.2539, 83.2],},{name: '山东',value: [117.1582, 36.8701, 82.5],},{name: '安徽',value: [117.29, 32.0581, 81.7],},{name: '湖北',value: [114.3896, 30.6628, 81.4],},{name: '江苏',value: [118.8062, 31.9208, 81.1],},{name: '新疆',value: [87.9236, 43.5883, 80.4],},{name: '湖南',value: [113.0823, 28.2568, 80.1],},],2024: [{name: '天津',value: [117.4219, 39.4189, 84.1],},{name: '河北',value: [114.4995, 38.1006, 85.8],},{name: '河南',value: [113.4668, 34.6234, 83.6],},{name: '北京',value: [116.4551, 40.2539, 83.2],},{name: '山东',value: [117.1582, 36.8701, 82.5],},{name: '安徽',value: [117.29, 32.0581, 81.7],},{name: '湖北',value: [114.3896, 30.6628, 81.4],},{name: '江苏',value: [118.8062, 31.9208, 81.1],},{name: '新疆',value: [87.9236, 43.5883, 80.4],},{name: '湖南',value: [113.0823, 28.2568, 80.1],},],},voltageLevel: ['2020', '2021', '2022', '2023', '2024'],},};const target = useRef(null);let myChart = null;useEffect(() => {myChart = echarts.init(target.current);renderChart();}, []);const renderChart = () => {// echarts 渲染echarts.registerMap('china', mapJson);let options = {// 时间线，提供了在多个 ECharts option 间进行切换timeline: {// 数据data: data.mapData.voltageLevel,// 类目轴axisType: 'category',// 自动切换autoPlay: true,// 间隔时间playInterval: 3000,// 位置left: '10%',right: '10%',bottom: '0%',width: '80%',// 轴的文本标签label: {// 默认状态normal: {textStyle: {color: '#ddd',},},// 高亮状态emphasis: {textStyle: {color: '#fff',},},},// 文字大小symbolSize: 10,// 线的样式lineStyle: {color: '#555',},// 选中点的样式checkpointStyle: {borderColor: '#888',borderWidth: 2,},// 控件样式controlStyle: {// 上一步按钮showNextBtn: true,// 下一步按钮showPrevBtn: true,// 默认样式normal: {color: '#666',borderColor: '#666',},// 高亮样式emphasis: {color: '#aaa',borderColor: '#aaa',},},},// 柱形图右侧展示baseOption: {grid: {right: '2%',top: '15%',bottom: '10%',width: '20%',},// 中国地图geo: {// 展示show: true,// 中国地图map: 'china',// 开启缩放roam: true,// 初始缩放zoom: 0.8,// 中心点center: [113.83531246, 34.0267395887],// 默认状态的省份样式itemStyle: {normal: {// 边框色值borderColor: 'rgba(147, 235, 248, 1)',// 边框宽度borderWidth: 1,// 区域颜色areaColor: {// 经向色值type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [// 0% 处的颜色{offset: 0,color: 'rgba(147, 235, 248, 0)',},// 100% 处的颜色{offset: 1,color: 'rgba(147, 235, 248, .2)',},],// 缺省为 falseglobalCoord: false,},},// 鼠标移入的色值emphasis: {areaColor: '#389BB7',borderWidth: 0,},},},},// 绑定时间轴的多个图表options: [],};// 为每一年度的图表添加数据data.mapData.voltageLevel.forEach((item, index) => {options.options.push({// 背景色backgroundColor: '#142037',title: [// 主标题，对应地图{text: '2020-2024 年度使用人数统计',left: '0%',top: '0',textStyle: {color: '#ccc',fontSize: 30,},},// 副标题，对应柱形图{id: 'statistic',text: item + '年数据统计情况',right: '0%',top: '4%',textStyle: {color: '#ccc',fontSize: 20,},},],// X 轴配置xAxis: {// 数据轴type: 'value',// 脱离 0 值比例scale: true,// 位置position: 'top',// 不显示分割线splitLine: {show: false,},// 不显示轴线axisLine: {show: false,},// 不显示刻度尺axisTick: {show: false,},// 类别文字axisLabel: {margin: 2,textStyle: {color: '#aaa',},},},// Y 轴yAxis: {// 选项轴type: 'category',// 轴线axisLine: {show: true,lineStyle: {color: '#ddd',},},// 轴刻度axisTick: {show: false,lineStyle: {color: '#ddd',},},// 轴标签axisLabel: {interval: 0,textStyle: {color: '#ddd',},},// 根据年份，获取对应数据data: data.mapData.categoryData[item].map((item) => item.name),},// 核心配置series: [// 柱形图{zlevel: 1.5,// 柱形图type: 'bar',// 每个柱子的色值itemStyle: {normal: {color: data.mapData.colors[index],},},// 根据年份，获取对应数据data: data.mapData.categoryData[item].map((item) => item.value),},// 散点图{// 散点（气泡）图type: 'effectScatter',// 使用地理坐标系coordinateSystem: 'geo',// 数据data: data.mapData.topData[item],// 标记大小symbolSize: function (val) {return val[2] / 4;},// 绘制完成后显示特效showEffectOn: 'render',// 展示涟漪特效rippleEffect: {brushType: 'stroke',},// 文字label: {normal: {formatter: '{b}',position: 'right',show: true,},},// 每一项的配置itemStyle: {normal: {color: data.mapData.colors[index],// 阴影配置shadowBlur: 5,shadowColor: data.mapData.colors[index],},},zlevel: 1,},],});});myChart.setOption(options);};return <div ref={target} className={props.classNmae}></div>;
}export default MapChart;

RadarBar

import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';function RadarBar(props) {const data = {regions: [{ id: 1, name: '华北', value: 63 },{ id: 2, name: '华南', value: 86 },{ id: 3, name: '华东', value: 85 },{ id: 4, name: '西南', value: 63 },{ id: 5, name: '西北', value: 54 },{ id: 6, name: '东北', value: 79 },],};const target = useRef(null);let myChart = null;useEffect(() => {myChart = echarts.init(target.current);renderChart();}, []);const renderChart = () => {const options = {// 雷达图的坐标系位置radar: {name: {textStyle: {color: '#05D5FF',fontSize: 14,},},shape: 'polygon', // 雷达图绘制类型，支持 'polygon' 和 'circle'center: ['50%', '50%'],radius: '80%', // 雷达图半径startAngle: 120,// 轴线axisLine: {lineStyle: {color: 'rgba(5,213,255,.8)',},},// 分割线（网格线）splitLine: {show: true,lineStyle: {width: 1,color: 'rgba(5,213,255,.8)', // 分割线颜色},},// 指示器（文字指示）indicator: data.regions.map((item) => {return {name: item.name,max: 100,};}),splitArea: {show: false,},},// 坐标极点polar: {center: ['50%', '50%'],radius: '0%',},// 坐标角度angleAxis: {min: 0,// 分割间隔interval: 5,clockwise: false, // 刻度增长是否按照顺时针 默认顺时针},// 径向轴radiusAxis: {min: 0,interval: 20,splitLine: {show: true,},},// 核心配置 只有一个对象直接可以写对象 多个对象使用数组包裹series: {type: 'radar',symbol: 'circle', // 标记图形类型symbolSize: 10, // 标记拐角大小itemStyle: {normal: {color: '#05D5FF',},},// 填充 styleareaStyle: {normal: {color: '#05D5FF',opacity: 0.5,},},lineStyle: {width: 2,color: '#05D5FF',},label: {normal: {show: true,color: '#fff',},},data: [{value: data.regions.map((item) => item.value),},],},};myChart.setOption(options);};return (<div className={props.className}><div>监控云端方位报警风险</div><div ref={target} className="w-full h-full"></div></div>);
}export default RadarBar;

Relation

import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';function Relation(props) {const data = {relations: [{id: 1,name: '软件工程II',source: '软件工程II',speed: 66,target: '软件工程I',value: [0, 300],},{id: 2,name: '软件概述',source: '软件工程I',speed: 78,target: '软件概述',value: [100, 300],},{id: 3,name: '软件内容',source: '软件工程I',speed: 92,target: '软件内容',value: [100, 100],},{id: 4,name: '软件导论',source: '软件导论',speed: 33,target: '软件工程I',value: [0, 100],},{ id: 0, name: '软件工程I', speed: 117, value: [50, 200] },],};const target = useRef(null);let myChart = null;useEffect(() => {myChart = echarts.init(target.current);renderChart();}, []);const renderChart = () => {const options = {// X 轴不需要展示xAxis: {show: false,type: 'value',},// Y 轴不需要展示yAxis: {show: false,type: 'value',},// 核心数据配置series: [{// 用于展现节点以及节点之间的关系数据type: 'graph',// 不采用任何布局layout: 'none',// 使用二维的直角坐标系coordinateSystem: 'cartesian2d',// 节点标记的大小symbolSize: 26,// z-indexz: 3,// 边界标签（线条文字）edgeLabel: {normal: {show: true,color: '#fff',textStyle: {fontSize: 14,},formatter: function (params) {let txt = '';if (params.data.speed !== undefined) {txt = params.data.speed;}return txt;},},},// 圆饼下文字label: {normal: {show: true,position: 'bottom',color: '#5e5e5e',},},// 边两端的标记类型edgeSymbol: ['none', 'arrow'],// 边两端的标记大小edgeSymbolSize: 8,// 圆数据data: data.relations.map((item) => {// id 为 0 ，表示数据中心，数据中心单独设置if (item.id !== 0) {return {name: item.name,category: 0,active: true,speed: `${item.speed}kb/s`,// 位置value: item.value,};} else {return {name: item.name,// 位置value: item.value,// 数据中心圆的大小symbolSize: 100,// 圆的样式itemStyle: {normal: {// 渐变色color: {colorStops: [{ offset: 0, color: '#157eff' },{ offset: 1, color: '#35c2ff' },],},},},// 字体label: { normal: { fontSize: '14' } },};}}),// 线links: data.relations.map((item, index) => ({// 方向source: item.source,target: item.target,// 线上的文字speed: `${item.speed}%`,// 线的样式lineStyle: { normal: { color: '#12b5d0', curveness: 0.2 } },// 文字位置label: {show: true,position: 'middle',offset: [10, 0],},})),},{// 用于带有起点和终点信息的线数据的绘制type: 'lines',// 使用二维的直角坐标系coordinateSystem: 'cartesian2d',// z-indexz: 1,// 线特效的配置effect: {show: true,smooth: false,trailLength: 0,symbol: 'arrow',color: 'rgba(55,155,255,0.5)',symbolSize: 12,},// 线的样式lineStyle: {normal: {curveness: 0.2,},},// 线的数据级，前后线需要重合。数据固定data: [[{ coord: [0, 300] }, { coord: [50, 200] }],[{ coord: [0, 100] }, { coord: [50, 200] }],[{ coord: [50, 200] }, { coord: [100, 100] }],[{ coord: [50, 200] }, { coord: [100, 300] }],],},],};myChart.setOption(options);};return (<div className={props.className}><div>知识溯源概念模型</div><div ref={target} className="w-full h-full"></div></div>);
}export default Relation;

RingBar

import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';function RingBar(props) {const data = {courses: [{ id: 1, name: '软件工程概论', value: 1363 },{ id: 2, name: 'Java程序设计', value: 1086 },{ id: 3, name: '计算机网络', value: 666 },{ id: 4, name: '操作系统', value: 999 },{ id: 5, name: '数据结构与算法', value: 765 },],};const target = useRef(null);let myChart = null;useEffect(() => {myChart = echarts.init(target.current);renderChart();}, []);/*** 双环形图绘制原理：* 1. 环形图通过饼图绘制。内外边距的距离减小，即为环形。环形中心点需要不断改变，否则会重叠* 2. 环形图绘制分为 上层和底层 两部分。上层作为绘制进度，底层作为背景图* 3. 依据 getSeriesData 生成对应的 上层和底层 series 数据，进行渲染*/const getSeriesData = () => {const series = [];data.courses.forEach((item, index) => {// 上层环形绘制series.push({name: item.name,// 使用饼图绘制，减少饼图宽度即为环形图type: 'pie',// 逆时针排布clockWise: false,// 不展示鼠标移入动画hoverAnimation: false,// 半径位置，需要依次递减，否则会重复在一处进行展示radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],// 中心点center: ['55%', '55%'],// 不展示 labellabel: { show: false },// 数据配置data: [// 设置数据与名称{ value: item.value, name: item.name },// 最大数据，展示比例{value: 1000,name: '',itemStyle: { color: 'rgba(0,0,0,0)', borderWidth: 0 },tooltip: { show: false },hoverAnimation: false,},],});// 底层图series.push({name: item.name,type: 'pie',// 图形不响应事件silent: true,// z-index: 置于底层z: 1,// 逆时针排布clockWise: false,// 不展示鼠标移入动画hoverAnimation: false,// 半径位置，需要依次递减，否则会重复在一处进行展示radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],// 中心点center: ['55%', '55%'],// 不展示 labellabel: { show: false },// 数据data: [// 绘制底线 75%{value: 7.5,itemStyle: { color: 'rgb(3, 31, 62)', borderWidth: 0 },tooltip: { show: false },hoverAnimation: false,},// 绘制底线 25% 透明区域{value: 2.5,name: '',itemStyle: { color: 'rgba(0,0,0,0)', borderWidth: 0 },tooltip: { show: false },hoverAnimation: false,},],});});return series;};const renderChart = () => {const options = {// 图例配置legend: {show: true,// 图例色块icon: 'circle',// 位置top: '14%',left: '60%',// 图例展示数据data: data.courses.map((item) => item.name),// 总宽度（一列）width: -5,// 每个色块的宽itemWidth: 10,// 每个色块的高度itemHeight: 10,// item 间距itemGap: 6,// 展示内容formatter: function (name) {return '{title|' + name + '}';},// 字体配置textStyle: {rich: {title: {fontSize: 12,lineHeight: 5,color: 'rgba(255,255,255,0.8)',},},},},// 提示层（鼠标移上去的提示信息）tooltip: {show: true,trigger: 'item',formatter: '{a}<br>{b}:{c}({d}%)',},// Y 轴展示选项yAxis: [{type: 'category',// 反向展示inverse: true,// 不展示轴线axisLine: {show: false,},// 不展示刻度axisTick: {show: false,},},],// X 轴不展示（没有 x 轴）xAxis: [{show: false,},],// 每两个标记一条线 相当于 10 个饼图series: getSeriesData(),};myChart.setOption(options);};return (<div className={props.className}><div>课程掌握熟练度处理</div><div ref={target} className="w-full h-full"></div></div>);
}export default RingBar;

TotalData

// import * as echarts from 'echarts';
import '@/assets/screen/fonts/css/style.css';
import { CountUp } from 'countup.js';
import { useEffect, useRef } from 'react';function TotalData(props) {const data = {totalData: {db: '65446',hb: '87788',hd: '76456',total: '6784739',xb: '75753',xn: '74564',zn: '42135',},};const totalCountTarget = useRef(null);const city1 = useRef(null);const city2 = useRef(null);const city3 = useRef(null);const city4 = useRef(null);const city5 = useRef(null);const city6 = useRef(null);useEffect(() => {new CountUp(totalCountTarget.current, data.totalData.total).start();new CountUp(city1.current, data.totalData.hb).start();new CountUp(city2.current, data.totalData.db).start();new CountUp(city3.current, data.totalData.hd).start();new CountUp(city4.current, data.totalData.zn).start();new CountUp(city5.current, data.totalData.xn).start();new CountUp(city6.current, data.totalData.xb).start();}, []);return (<div className={props.className}><div className="p-6"><div className="text-slate-300 text-center">数据总量：<spanref={totalCountTarget}className="text-7xl ml-2 mr-2 font-bold font-[Electronic] text-gradient">679,473,929</span>条记录</div><div className="mt-3 flex flex-wrap"><div className="w-1/3 text-center text-slate-400 text-sm">抬头：<spanref={city1}className="text-[#5DC5EF] text-3xl font-[Electronic]">8,778,988</span></div><div className="w-1/3 text-center text-slate-400 text-sm">睡觉：<spanref={city2}className="text-[#5DC5EF] text-3xl font-[Electronic]">8,778,988</span></div><div className="w-1/3 text-center text-slate-400 text-sm">举手：<spanref={city3}className="text-[#5DC5EF] text-3xl font-[Electronic]">8,778,988</span></div><div className="w-1/3 text-center text-slate-400 text-sm">低头：<spanref={city4}className="text-[#5DC5EF] text-3xl font-[Electronic]">8,778,988</span></div><div className="w-1/3 text-center text-slate-400 text-sm">站立：<spanref={city5}className="text-[#5DC5EF] text-3xl font-[Electronic]">8,778,988</span></div><div className="w-1/3 text-center text-slate-400 text-sm">坐直：<spanref={city6}className="text-[#5DC5EF] text-3xl font-[Electronic]">8,778,988</span></div></div></div></div>);
}export default TotalData;

VerticalBar

import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';function VerticalBar(props) {const data = {servers: [{ id: 1, name: '很好', value: 33 },{ id: 2, name: '较好', value: 20 },{ id: 3, name: '略好', value: 13 },{ id: 4, name: '略差', value: 17 },{ id: 5, name: '较差', value: 14 },{ id: 6, name: '很差', value: 3 },],};const target = useRef(null);let myChart = null;useEffect(() => {myChart = echarts.init(target.current);renderChart();}, []);const renderChart = () => {const options = {// X 轴展示选项xAxis: {type: 'category',// 根据根据服务端数据筛选data: data.servers.map((item) => item.name),// 文字色值axisLabel: {color: '#9EB1C8',},},// Y 轴展示数据yAxis: {// 数据展示type: 'value',// 不显示轴show: false,// 最大值（防止触顶）max: function (value) {// 取整return parseInt(value.max * 1.2);},},// echarts 网格绘制的位置，对应 上、右、下、左grid: {top: 16,right: 0,bottom: 26,left: -26,// 计算边距时，包含标签containLabel: true,},// 柱形图核心配置series: [{// 柱形图type: 'bar',// 数据筛选data: data.servers.map((item) => ({name: item.name,value: item.value,})),// 每个轴的样式itemStyle: {color: '#479AD3', // 设置柱子的颜色barBorderRadius: 5, // 设置柱子的圆角shadowColor: 'rgba(0, 0, 0, 0.3)', // 设置柱子的阴影颜色shadowBlur: 5, // 设置柱子的阴影模糊大小},// 柱子宽度barWidth: 12,// 文本label: {show: true,// 设置标签位置为右侧position: 'top',textStyle: {// 设置标签文本颜色color: '#fff',},// 格式化展示数值formatter: '{c}%',},},],};myChart.setOption(options);};return (<div className={props.className}><div>听课抬头率分布占比</div><div ref={target} className="w-full h-full"></div></div>);
}export default VerticalBar;

WordCloud

import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { useEffect, useRef } from 'react';function WordCloud(props) {const data = {wordData: [{ value: 24, name: '链表' },{ value: 18, name: '队列' },{ value: 16, name: '树' },{ value: 12, name: 'Java' },{ value: 10, name: 'JavaScript' },{ value: 8, name: 'C++' },{ value: 6, name: '设计模式' },{ value: 45, name: '算法' },{ value: 4, name: '数据结构' },{ value: 2, name: '操作系统' },{ value: 1, name: '计算机网络' },{ value: 43, name: '前端' },{ value: 3, name: '后端' },{ value: 5, name: '数据库' },{ value: 7, name: 'HTML' },{ value: 9, name: 'CSS' },{ value: 11, name: 'Vue' },{ value: 13, name: 'React' },{ value: 15, name: 'Webpack' },{ value: 17, name: 'Node.js' },],};const target = useRef(null);let myChart = null;useEffect(() => {myChart = echarts.init(target.current);renderChart();}, []);/*** 生成随机色值*/const randomRGB = () => {const r = Math.floor(Math.random() * 255);const g = Math.floor(Math.random() * 255);const b = Math.floor(Math.random() * 255);return `rgb(${r}, ${g}, ${b})`;};const renderChart = () => {const options = {series: [{// 类型type: 'wordCloud',// 形状shape: 'circle',width: '100%',height: '100%',// 数据映射文本的大小范围sizeRange: [12, 52],// 文字旋转范围rotationRange: [0, 0],// 单词之间的间距gridSize: 5,// 渲染动画layoutAnimation: true,// 字体textStyle: {// 随机色值color: randomRGB,},// 高亮字体emphasis: {textStyle: {fontWeight: 'bold',color: '#000',},},// 数据data: data.wordData,},],};myChart.setOption(options);};return (<div className={props.className}><div>关键词条</div><div ref={target} className="w-full h-full"></div></div>);
}export default WordCloud;