随笔分类 -  Echarts

图表
vue编写图表基本格式
摘要：<template> <div> <div id="chart" style="width: 100%;height:500px" /> </div> </template> <script> export default { data() {}, mounted() { this.getList( 阅读全文
posted @ 2021-05-21 10:45 追逐-y 阅读(106) 评论(0) 推荐(0)
Echarts旭日图-解决lable文字溢出问题
摘要：1、需求 1.1、解决lable文字溢出问题 解决方案： 1.1.1、文字隐藏，鼠标移入后展示 1.1.2、到达指定宽度后部分文字隐藏用...三个点显示，鼠标移入后显示全部数据 1.2、数据格式转换 2、实现效果 3、重点代码 4、完整代码 var departmentPieData =[{ "gr 阅读全文
posted @ 2021-05-19 16:58 追逐-y 阅读(3724) 评论(0) 推荐(0)
Echarts柱状图-多个，解决柱状图显示位置问题（错位显示）
摘要：1、需求 1.1、解决后端返回数据为空时，柱状图显示位置问题（错位显示） 1.2、数据格式转换 2、后端数据返回0 2.1、实现效果 2.2、完整代码 var departmentArr = []; var histogramData ={ "2021/05/05":[{ "orderTime":n 阅读全文
posted @ 2021-05-19 16:23 追逐-y 阅读(6065) 评论(0) 推荐(0)
Echarts树图-解决树图只展示三层的问题
摘要：1、需求 1.1、解决树图只展示3层的问题 1.2、数据格式转换 1.3、解决报错问题（setOption） 2、实现效果 3、重点代码 initialTreeDepth: 10, //展示的层数(从0开始) 4、完整代码 //学校school>年级grade>班级class>班主任director 阅读全文
posted @ 2021-05-19 15:38 追逐-y 阅读(1097) 评论(0) 推荐(0)
ECharts柱状图-彩色柱状图(渐变)，自定义鼠标移入小圈颜色、鼠标移入后提示框显示不全问题、渲染到页面中
摘要：1、需求 2、实现效果 3、重点代码 3.1、彩色柱状图(渐变) var colors2 = [ ['#8886E9', '#E75D90'], ['#8886E9', '#06DFE8'], ['#F2E97E', '#F56E65'], ['#70B7FE', '#0882DD'] ]; //渐 阅读全文
posted @ 2020-11-12 17:25 追逐-y 阅读(746) 评论(0) 推荐(0)
ECharts折线图-循环展示数据、自定义色值（渐变）
摘要：1、需求：折线图条数不定，需按后端给出数据进行相应展示，且色值不能使用默认的样式 2、实现效果 3、重点代码 var fontColor = '#30eee9'; var chartData = [{ value: { 01: '20', 02: '10' }, xaxis: '2010' }, { 阅读全文
posted @ 2020-11-12 15:47 追逐-y 阅读(1485) 评论(0) 推荐(1)