奉化建设网站,wordpress默认图像不显示,iis网站属性没有asp.net,公司网站要备案么最终效果 使用介绍
echarts图表的绘制#xff0c;大体分为三步#xff1a;
根据 DOM实例#xff0c;通过 echarts.init方法#xff0c;生成 echarts实例构建 options配置对象#xff0c;整个echarts的样式#xff0c;皆有该对象决定最后通过实例.setOption方法#xf…最终效果 使用介绍
echarts图表的绘制大体分为三步
根据 DOM实例通过 echarts.init方法生成 echarts实例构建 options配置对象整个echarts的样式皆有该对象决定最后通过实例.setOption方法设置配置对象配置对象是echarts中最复杂的部分也就是核心。
!-- 为 ECharts 准备一个定义了宽高的 DOM --
div idmain stylewidth: 600px;height:400px;/div
script typetext/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 绘制一些图表但是不知道相关代码配置怎么写
我需要你按照我接下来的要求给出代码。
ChatGPTxxx
我我想绘制一张横向的柱形图比如柱形图第一行
坐标为华北数据为20第二行 坐标为 西北数据为30
代码应该怎么写
ChatGPTxxx
我我不想要横坐标。
ChatGPTxxx最终生成 总之就是这样逐渐细化需求直到完成我们的要求为止。
具体示例
这里可以先试用 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 classNameflex-1 mr-2 bg-opacity-50 bg-slate-800 p-3 flex flex-col{/* 横向柱状图*/}HorizontalBar classNameh-1/3 box-border pb-4 /{/* 雷达图*/}RadarBar classNameh-1/3 box-border pb-4 /{/* 关系图*/}Relation classNameh-1/3 //div{/*中*/}div classNamew-1/2 mr-2 flex flex-col{/* 数据总览图*/}TotalData classNmaebg-opacity-50 bg-slate-800 p-3 /{/* 地图可视化*/}MapChart classNmaebg-opacity-50 bg-slate-800 p-3 mt-2 flex-1 //div{/*右*/}div classNameflex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col{/* 竖向柱状图*/}VerticalBar classNameh-1/3 box-border pb-4 /{/* 环形图*/}RingBar classNameh-1/3 box-border pb-4 /{/* 文档云图*/}WordCloud classNameh-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学生来源信息/divdiv ref{target} classNamew-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 和 circlecenter: [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监控云端方位报警风险/divdiv ref{target} classNamew-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知识溯源概念模型/divdiv ref{target} classNamew-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课程掌握熟练度处理/divdiv ref{target} classNamew-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 classNamep-6div classNametext-slate-300 text-center数据总量spanref{totalCountTarget}classNametext-7xl ml-2 mr-2 font-bold font-[Electronic] text-gradient679,473,929/span条记录/divdiv classNamemt-3 flex flex-wrapdiv classNamew-1/3 text-center text-slate-400 text-sm抬头spanref{city1}classNametext-[#5DC5EF] text-3xl font-[Electronic]8,778,988/span/divdiv classNamew-1/3 text-center text-slate-400 text-sm睡觉spanref{city2}classNametext-[#5DC5EF] text-3xl font-[Electronic]8,778,988/span/divdiv classNamew-1/3 text-center text-slate-400 text-sm举手spanref{city3}classNametext-[#5DC5EF] text-3xl font-[Electronic]8,778,988/span/divdiv classNamew-1/3 text-center text-slate-400 text-sm低头spanref{city4}classNametext-[#5DC5EF] text-3xl font-[Electronic]8,778,988/span/divdiv classNamew-1/3 text-center text-slate-400 text-sm站立spanref{city5}classNametext-[#5DC5EF] text-3xl font-[Electronic]8,778,988/span/divdiv classNamew-1/3 text-center text-slate-400 text-sm坐直spanref{city6}classNametext-[#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听课抬头率分布占比/divdiv ref{target} classNamew-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关键词条/divdiv ref{target} classNamew-full h-full/div/div);
}export default WordCloud;
