echarts图表实际开发样例（带详细注解）

最新推荐文章于 2024-05-19 09:47:39 发布
最新推荐文章于 2024-05-19 09:47:39 发布
阅读量604 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple596529/article/details/107606043
版权

饼图

样例一：（中间文字固定显示带提示框）
在这里插入图片描述
样例一配置项：

option = {
				title: {//标题
					text: '会话统计',
					x: 20,
					y: 20,
					textStyle: {
						color: '#3C4353',
						fontSize: 12
					}
				},
				graphic: [//固定文字或者图标
					{
						type: 'text',
						left: 'center',
						top: '48%',
						style: {
							text: '4545',
							textAlign: 'center',
							fill: '#3C4353',
							fontSize: 40
						}
					},
					{       //图形中间文字
						type: 'text',
						left: 'center',
						top: '55%',
						style: {
							text: '会话总数',
							textAlign: 'center',
							fill: '#838A9D',
							fontSize: 17
						}
					}
				],
				tooltip: {//提示文字
					trigger: 'item',
					position: 'top',
					transitionDuration: 0,
					extraCssText: 'box-shadow:0px 1px 20px 0px rgba(0,0,0,0.1);width:140px;',
					backgroundColor: 'white',
					formatter: '<span style="font-size: 12px;">{b}: {c} ({d}%)</span>',
					borderColor: '#333',
					textStyle: {
						color: '#333333'
					}
				},
				legend: {//展示选项
					bottom: 30,
					left: 'center',
					icon: 'circle',
					itemWidth: 8,
					itemHeight: 8,
					itemTop: 10,
					data: ['丢包会话', '未丢包会话']
				},
				series: [//展示图选择（饼图、折线）
					{
						name: '访问来源',
						type: 'pie',
						radius: ['55%', '45%'],
						hoverOffset: 1,
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
							/*formatter: function(data) {富文本展示hover中心文字变化
									let a = data.value;
									return  '{a|' + a + '}' + '{b| 会话总数}';
								},
								rich: {
									a: {
										lineHeight: 25,
										color: '#3C4353',
										fontSize: 30
									},
									b: {
										lineHeight: 25,
										color: '#838A9D',
										fontSize: 10
									}
						    },*/
						},
						center: ['50%', '50%'],//环形大小
						labelLine: {
							show: false
						},
						itemStyle: {//item得的样式定义
							normal: {
								color: function (params) {
									//自定义颜色
									let colorList = [
										'#F7B500', '#E2E4E8'
									];
									return colorList[params.dataIndex];
								}
							}
						},
						data: [
								{value: 1, name: '丢包会话'},
						  	   {value: 2, name: '未丢包会话'}
						]
					}
				]
		};

折线图

样例一：
在这里插入图片描述

样例一配置项：

option: {
        title: {//标题
          text: '丢包率TOP5',
          x: 20,
          y: 20,
          textStyle: {
            color: '#333333',
            fontSize: 12
          }
        },
        tooltip: {//提示框
          trigger: 'axis',
          position: 'left',
          extraCssText: 'box-shadow:0px 1px 20px 0px rgba(0,0,0,0.1);',
          backgroundColor: 'white',
          formatter: function (params) {   //富文本函数用于提示框
            let iconPath = [
              './static/images/session-detection/circle_red.png',
              './static/images/session-detection/circle_orange.png',
              './static/images/session-detection/circle_yellow.png',
              './static/images/session-detection/circle_bule.png',
              './static/images/session-detection/circle_green.png'
            ];
            let str = '';
            for (let i = 0; i < params.length; i++) {
              if (i === 0) {
                str += '<div style="margin-top: 3px;"></div>';
              }
              str += '<image width="10px" height="10px" style="margin-left: 10px" src="' + iconPath[i] + '"/>';
              str += '<span style="font-size: 12px; margin-left: 10px;">' + params[i].seriesName + '</span>';
              str += '<span style="font-size: 12px; margin-left: 10px;">' + params[i].value + '%</span><br/>';
            }
            return str;
          },
          borderColor: '#333',
          axisPointer: {  //坐标轴指示器，坐标轴触发有效，
            type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
            lineStyle: {
              color: '#6493F4'
            }
          },
          textStyle: {
            color: '#333333'
          }
        },
        legend: {
          y: 45,
          right: '3%',
          itemWidth: 8,
          itemHeight: 8,
          data: [
            {
              name: 'line1',
              icon: 'image://./static/images/session-detection/circle_red.png'
            },
            {
              name: 'line2',
              icon: 'image://./static/images/session-detection/circle_orange.png'
            },
            {
              name: 'line3',
              icon: 'image://./static/images/session-detection/circle_yellow.png'
            }
          ]
        },
        grid: {//图表位置
          left: '3%',
          right: '3%',
          y: 80,
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,//x轴两边留白策略
          data: ['', '12:10:00', '12:11:00', '12:30:00', '13:00:00', '14:00:00', '15:00:00'],
          // y轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#60697B'
            }
          },
          axisLine: { //x轴颜色和宽度
            lineStyle: {
              color: '#E2E5EB'
            }
          }
        },
        yAxis: {
          data: [0, 20, 40, 60, 80, 100],
          type: 'value',//若y轴为离散形且为柱形图 柱形将从y轴开始横展示
          max: 100,
          min: 0,
          name: '百分比（%）',
          nameTextStyle: {
            padding: [0, 10, 0, 0],
            color: '#60697B'
          },
          splitLine: { //网格线
            lineStyle: {
              type: 'dashed',    //设置网格线类型 dotted：虚线   solid:实线
              width: 0.5
            },
            show: true //隐藏或显示
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#60697B'
            }
          },
          axisLine: {
            lineStyle: {//x轴颜色和宽度
              color: '#E2E5EB',
              width: 2
            }
          }
        },
        series: [
          {
            name: 'line1',
            type: 'line',
            data: [10, 45, 69, 89, 56, 36, 12],
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#FA3535'
              }
            }
          },
          {
            name: 'line2',
            type: 'line',
            data: [45, 69, 89, 56, 36, 12,10],
            symbol: 'none',//折点
            itemStyle: {
              normal: {
                color: '#FF7F3F'
              }
            }
          },
          {
            name: 'line3',
            type: 'line',
            data: [69, 89, 56, 36, 12, 20, 98],
            symbol: 'none',
            itemStyle: {
              normal: {
                color: '#F7B500'
              }
            }
          }
        ]
      }

柱形图

样例一：
在这里插入图片描述

样例代码：

 option: {
        title: {//标题
          text: '单会话码率',
          x: 20,
          y: 20,
          textStyle: {
            color: '#333333',
            fontSize: 12
          }
        },
        backgroundColor: 'white',
        legend: { //选例
          data: [
            {
              name: '丢包率',
              icon: 'image://./static/images/session-detection/circle_bule.png'
            },
            {name: '上行码率'},
            {name: '下行码率'}
          ],
          icon: 'circle',
          itemWidth: 8,//选例图表大小
          itemHeight: 8,
          borderColor: '#f58f23',
          right: '40%',
          y: 45
        },
        tooltip: {//提示框
          trigger: 'axis',
          position: 'left',
          extraCssText: 'box-shadow:0px 1px 20px 0px rgba(0,0,0,0.1);',//提示框阴影大小
          backgroundColor: 'white',
          borderColor: '#333',
          formatter: function (params) {   //富文本格式化函数
            let iconPath = [
              './static/images/session-detection/circle_bule.png',
              './static/images/session-detection/circle_blues.png',
              './static/images/session-detection/circle_yellows.png'
            ];
            let str = '';
            for (let i = 0; i < params.length; i++) {
              if (i === 0) {
                str += '<div style="margin-top: 3px;width: 100%"></div>';
              }
              str += '<image width="10px" height="10px" style="margin-left: 10px" src="' + iconPath[i] + '"/>';
              str += '<span style="font-size: 12px; margin-left: 10px;">' + params[i].seriesName + '</span>';
              if (i === 0) {
                str += '<span style="font-size: 12px; margin-left: 10px;">' + params[i].value + '%</span><br/>';
              } else if (i === 2) {
                str += '<span style="font-size: 12px; margin-left: 10px;">' + params[i].value * -1 + 'Mbps</span><br/>';
              } else if (i === 1){
                str += '<span style="font-size: 12px; margin-left: 10px;">' + params[i].value + 'Mbps</span><br/>';
              }
            }
            return str;
          },
          textStyle: {
            color: '#333333'
          },
          axisPointer: {  //坐标轴指示器
            type: 'line', //默认为line
            lineStyle: {
              color: '#6493F4'
            },
            z: 0 //相当于z-index
          }
        },
        xAxis: {
          data: ['12:10:01', '12:10:02', '12:10:03', '12:10:04', '12:10:05', '12:10:06', '12:10:07'],
          splitLine: {show: false},
          axisLabel: {
            show: true,
            textStyle: {
              color: '#60697B'
            }
          },
          axisLine: { //x轴颜色和宽度
            onZero: true,
            lineStyle: {
              color: '#E2E5EB'
            }
          },
          splitArea: {show: false}
        },
        yAxis: [//双y轴则为数组
          {
            /*inverse: true,*/
            max: 100,
            min: 0,
            name: '丢包率（%）',
            nameTextStyle: {
              align: 'center',
              padding: [0, 0, 0, 25],
              color: '#60697B'
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#60697B'
              }
            },
            axisLine: {
              lineStyle: {//x轴颜色和宽度
                color: '#E2E5EB',
                width: 1
              }
            }
          },
          {
            /*inverse: true,*/
            /*type: 'category',*///用于固定数据
            max: 20,
            min: -20,
            name: '码率（Mbps）',
            nameTextStyle: {
              align: 'center',
              padding: [0, 0, 0, -25],
              color: '#60697B'
            },
            splitArea: {show: false},
            axisLine: {
              lineStyle: { //x轴颜色和宽度
                color: '#E2E5EB',
                width: 1
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#60697B'
              }
            },
            splitLine: { //网格线
              lineStyle: {
                type: 'dashed',    //设置网格线类型 dotted：虚线   solid:实线
                width: 0.5
              },
              show: true //隐藏或显示
            }
          }
        ],
        grid: { //图表位置
          y: 80,
          x2: 50,
          left: 60
        },
        series: [
          { //折线
            name: '丢包率',
            type: 'line',
            smooth: true,
            yAxisIndex: 0,
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: '#8cd5c2', //改变折线点的颜色
                borderColor: '#4980F2',
                lineStyle: {
                  color: '#4980F2' //改变折线颜色
                }
              }
            },
            areaStyle: { //渐变背景色的设置
                normal: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#6493F4' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#FFFFFF' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            data: [10, 56, 89, 63, 33, 45, 68]
          },
          {
            name: '上行码率',
            type: 'bar',
            stack: 'one', //同一名字则为正负柱形图
            emphasis: '',
            yAxisIndex: 1,
            barWidth: 10,
            data: [4, 6, 8, 12, 14, 16, 8],
            itemStyle: {
              normal: {
                color: '#4980F2',
                barBorderRadius: [10, 10, 10, 10]
              }
            }
          },
          {
            name: '下行码率',
            type: 'bar',
            stack: 'one',
            yAxisIndex: 1,
            emphasis: '',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: '#F7B500',
                barBorderRadius: [10, 10, 10, 10]
              }
            },
            data: [-4, -6, -8, -12, -14, -16, -8]
          }
        ]
      }

样例二：（此图同样为正负柱形图只不过一部分设置为白色了 ）y为离散值可实现颠倒
在这里插入图片描述
图例代码：

option: {
        title: {//标题
          x: -5,
          text: '模块一AAa(时延： 30MS)',
          textStyle: {
            color: '#333333',
            fontSize: 10
          }
        },
        grid: {//图表位置
          y: 20,
          x: 20,
          width: '100%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        dataZoom: [//滚动条（为时间轴的时候用）
          {
            type: 'slider',
            bottom: 0,
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 50
          }
        ],
        xAxis: {
          type: 'value',
          splitNumber: 0,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#60697B',
              fontSize: 10
            }
          },
          axisTick: {//坐标轴刻度线
            show: false
          },
          splitLine: { //网格线
            show: false //隐藏或显示
          },
          axisLine: { //x轴颜色和宽度
            lineStyle: {
              color: '#4980F2',
              width: 3
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E'],
          axisLabel: {
            show: false,
            textStyle: {
              color: '#60697B',
              fontSize: 8
            }
          },
          splitLine: { //网格线
            lineStyle: {
              type: 'dashed',    //设置网格线类型 dotted：虚线   solid:实线
              width: 0.5
            },
            show: true //隐藏或显示
          },
          axisLine: { //x轴颜色和宽度
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: 'chart1',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              color: 'white'
            },
            label: {
              show: true,
              fontSize: 10,
              lineHeight: 1,
              position: ['100%', '-100%'],
              color: '#4980F2',
              formatter: function (params) {
                return params.name;
              }
            },
            data: [100, 80, 60, 40, 20]
          },
          {
            name: 'chart1s',
            type: 'bar',
            stack: '总量',
            itemStyle: {
              normal: {
                color: 'yellow',
                borderColor: 'yellow'
              }
            },
            zlevel: 3,
            barWidth: 10,
            data: [100, 80, 60, 40, 20]
          }
        ]
      },

后续将不断更新图例或者其他模板。

欲指_Object
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java面试基础篇
m0_67392010的博客
07-29 3576
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。Java的强引用、弱引用、软引用、虚引用。Java语言基础常识。Java12新特性。JavaIO详解。...
vue 常用的 Echarts 示例
大家好，我是 ed.
10-09 2174
vue 常用的 Echarts 示例 为啥要整理这一篇博文呢？其实最近做大屏做的恶心了，好多echarts图表，样式花里胡哨，调样式太费劲了，然后把做过的拿下来备份一下，需要的话直接粘贴稍作修改就可以了。 echarts配置项官网：https://echarts.apache.org/zh/option.html#title 多条柱形图 option = { animation: false, title: { text: '本周主煤流
eCharts配置项——“title”各种常用设置
zyc_yy的博客
05-19 457
eCharts，数据可视化
echarts经典图形案例 | 注释比较详细 | 方便修改
lijiamingccc的博客
07-21 625
目录饼图堆叠图雷达图折柱混合图词云图地图 所有参数可根据自己需要更改 饼图 option = { title : { text: 'pie图深入学习', subtext: '测试副标题', x:'center' }, tooltip : { trigger: 'item', //格式化显示提示： a:series.name b:data.name c:data.value d:(饼图和雷达图才有
echarts数据可视化介绍+常用的图表案例分析（值得收藏的干活）
promise466的博客
10-28 8130
Echarts的优点比较明显体积小，免费、上手快，只需要有一些js基础，剩下的就是复制粘贴的事情，而且是国产的东西，文档看起来也比较方便
echarts 图表折线图 实例
zhang_zan
07-31 652
echarts绘制折线图
echarts数据展示大屏样例
11-10
ECharts 是一个由百度开发的开源JavaScript图表库，它提供了丰富的可视化图表类型，包括但不限于柱状图、饼状图、线形图、散点图、仪表盘、地图等，能够满足各种数据展示的需求。在"echarts数据展示大屏样例"中，...
前端开发前端ECharts图表可视化大屏开发案例.zip
05-27
前端开发前端ECharts图表可视化大屏开发案例.zip前端开发前端ECharts图表可视化大屏开发案例.zip前端开发前端ECharts图表可视化大屏开发案例.zip前端开发前端ECharts图表可视化大屏开发案例.zip前端开发前端ECharts...
前端ECharts图表可视化大屏开发案例
最新发布
06-03
在现代的Web应用中，数据可视化扮演着至关重要的角色，特别是在大数据时代，前端ECharts图表可视化大屏开发已经成为展示复杂信息、分析业务趋势的关键技术。本文将深入探讨使用ECharts库进行前端大屏开发的实践案例...
Axure集成echarts图表组件.rplib
06-28
主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图，饼图，折线图等基本图形的展示。 主要是集成一些Axure中关于图表的展示部分，在实际的设计中用处很是广泛，包括一些柱状图...
java后台生成echarts图表
11-13
Java 后台生成 ECharts 图表是一种常见的数据可视化方法，特别是在大数据处理和Web应用中。ECharts 是百度推出的一个开源的、基于 JavaScript 的数据可视化库，提供了丰富的图表类型和强大的交互功能。然而，在某些...
echarts开发实例Demo
11-04
echarts开发实例Demo
echarts示例代码
04-22
百度echarts的示例代码，有柱状图，折线图，雷达图
echarts官网实例
08-24
echarts
ECharts关系图、流程图、导向图(详细示例——满满的注释)
陈新科的博客
12-22 9944
具体代码如下： init() { var myChart = this.$echarts.init(document.getElementById("main")); var option = { title: { // text: "流程", }, series: [ { type: "graph", //关系图 layout:...
Echarts可视化教程（三）——折线图的绘制
fh8uuc的博客
10-21 6632
阶梯图是一种比较特殊的折线图，阶梯图使用间歇型跳跃的方式显示一种无规律的数据的变化。我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！之间补充代码，这段代码由上面的堆积折线图示例代码修改而来，你需要补充完这段代码，实现将所有的四条折线都改成阶梯图：其中地铁。同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。中折线图的绘制，包括标准折线图、堆积折线图等。
Echarts—自定义图例布局样式和图例换行的实现
前端探险家的博客
06-13 7418
之前做过各种各样需求的Echarts图表，通过查找博客和查看官网配置项api，都能实现，但是很久不用的话，再去做某些一样功能需求的图表，有些配置项还是需要反复查看，或者去搜索，所以我特意开了一个可视化专栏，去把使用过的可视化记录下来，也方便日后自己复用或者为他人提供便利！这次就记录一下自定义图例布局样式和图例换行的实现，我会把整个图表实现的代码都带出来，如果日后项目中用到类似的需求，也可以直接拿去！案例实现如下图；legend : {
echarts 折线图实例
smileonlytoyou的博客
09-02 703
定义div <div id="moreColumn" style="width: 80%; height: 70%;float: left;"></div> 定义一个mycharts var myChart = echarts.init(document.getElementById('moreColumn')); 定义方法 function loadCol...
echars 多图表开发
qq_39889855的博客
05-10 214
initBarChart2 () { let yData = ['经济科学', '化学', '生物学', '物理学', '电子自控'] let barchart2 = echarts.init(this.$refs.barchart2); var color = [{ color: '#2EE67D', step: 4 }, { color: '#FFD54A', step: 5 ...
ECharts-Java使用Java快速开发ECharts图表
05-23
ECharts-Java是一个基于Java语言的ECharts图表开发工具，可以快速地将数据转换为ECharts图表。它提供了丰富的图表类型和交互方式，可以轻松地实现各种数据可视化需求。 使用ECharts-Java，你可以快速地创建各种类型...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值