![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
echarts
文章平均质量分 50
妍崽崽@
这个作者很懒,什么都没留下…
展开
-
echarts实现炫酷科技感的流光效果
echarts实现炫酷科技感的流光效果原创 2024-04-01 14:41:30 · 1079 阅读 · 0 评论 -
vue+echarts实现桑吉图的效果
在我们项目使用图形的情况下,桑吉图算是冷门的图形了,但是它可以实现我们对多级数据之间数据流向更好的展示的需求,比如,我们实际数据流向中,具有1对多,多对多的情况下,如果用tree是不合适,用思维导图的话,只能实现线路的展示,达不到我们想对数据可视化的需要原创 2023-12-06 10:19:49 · 1777 阅读 · 0 评论 -
echarts最新资料,gallery弃用之后的网站
前言:整理最新部分echarts资料1、官网案例入口:点我2、官网api入口:点我3、扩展入口:(1)扩展图形galleryhttps://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=allhttps://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all(2)新扩展-私人,只能看代码,无法编辑测试ECh...原创 2022-02-14 14:36:01 · 4564 阅读 · 4 评论 -
vue+highcharts实现3d环形图
前言: vue+highcharts实现3d饼图效果图:实现步骤:1、安装 highchartsnpm install highcharts --save2、js部分:import Highcharts from 'highcharts/highstock'data里面: options: { chart: { type: 'pie', options3d: ...原创 2021-11-02 11:59:55 · 3045 阅读 · 8 评论 -
echarts的x轴文字倾斜展示
前言: echarts图x轴文字倾斜展示效果图:实现代码:xAxis:{ data:['站点一','站点二'] //主要是下面的代码-倾斜 axisLabel:{ rotate : 60 }}到此结束原创 2021-08-26 10:54:00 · 13938 阅读 · 1 评论 -
echarts实现动态的图表
前言: echarts图表实现动态仪表效果效果图:实现代码: let angle = 0;//角度,用来做简单的动画效果的let value = 40;option = { backgroundColor:"#022C2B", title: { text: '{a|'+ value +'}{c|%}'+'\n'+'{b|资料管理}', x: 'center', y: 'center', ...原创 2020-08-27 15:26:00 · 4402 阅读 · 9 评论 -
echarts实现比较炫的仪表盘
前言: echarts图形效果图:实现源码: let value = 40;option = { backgroundColor:"#061740", title: { text: '{a|'+ value +'}{c|%}'+'\n'+'{b|资料管理}', x: 'center', y: 'center', textStyle: { rich:{ ...原创 2020-08-27 14:58:47 · 2300 阅读 · 2 评论 -
echarts+3d饼图
前言: echarts实现3d饼图效果图:实现源码:var salesData = [{ label: "Basic", color: "#2f7ed8"}, { label: "Plus", color: "#0d233a"}, { label: "Lite", color: "#8bbc21"}, { label: "Elite", color: "#910000"}, { label: ...原创 2020-08-22 15:40:38 · 15752 阅读 · 25 评论 -
echarts自传作品入口
入口:https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=follow原创 2020-08-20 17:36:16 · 4942 阅读 · 17 评论 -
echarts+流程图
前言: echarts+流程图效果图:实现源码:var title = [ // 第零层 { label: '0', warn: 5, error: 8, value: 2 }, // 第一层 { label: '1-0', warn: 5, error: 8, value: 5 }, {...原创 2020-08-22 15:34:44 · 4176 阅读 · 0 评论 -
echarts+科技风环形图
前言: echart环形图效果图:实现代码:let value = 55.33;let title = '超期率';let int = value.toFixed(2).split('.')[0];let float = value.toFixed(2).split('.')[1];option = { backgroundColor: '#051F54', title: { text: '{a|'+ int +'}{b|.'+ ...原创 2020-08-22 15:30:36 · 1507 阅读 · 4 评论 -
echarts实现立体柱图
前言: echarts官网实例中没有立体柱图,这里提供立体柱图代码效果图:实现代码:option = { backgroundColor: '#031245', "textStyle": { "color": "#c0c3cd", "fontSize": 14 }, "toolbox": { "show": false, "feature": { "sav...原创 2020-08-22 15:22:27 · 2175 阅读 · 0 评论 -
echarts实现进度条带背景
前言: echarts进度条科技风效果图:实习代码: var myData = ['低压居民', '低压非居民', '高压单电源', '高压双电源'] var lineData = [100, 100, 100, 100] var thisYearData = { 1: [11, 38, 23, 39] } var timeLineData = [1] var background = "#0e2147"; //...原创 2020-08-22 15:15:52 · 2776 阅读 · 1 评论 -
echarts实现西安地铁图
前言: echarts实现西安地铁图效果图:官网入口实现代码:var data = [ { name: "地铁一号线", tooltip: { formatter: "{b}: 19999<br />" }, symbolSize: 0.1, value: [5, 750], x: 800, ...原创 2020-08-21 13:44:09 · 4876 阅读 · 24 评论