echarts
粉末的沉淀
无趣
展开
-
AJ-Report:给中国地图增加底图设置
这段代码的意思是,先获取到下拉列表的值(为了配合json文件的中文名称,我把下拉选项的code和name都设置为中文了),这个值也是省份的名称,通过省份名称读取对应的json文件,利用echarts注册地图,map是地图的名称,mapData是注册地图需要使用的json文件,然后把options的geo设置为刚才注册的地图。1、准备底图json文件,aj report自带了map的json文件,但是我发现少了浙江省,从其他地方复制过来了。3、在地图vue文件里新增设置底图的方法,并且加到编辑器里去。原创 2023-04-25 13:48:02 · 679 阅读 · 1 评论 -
echarts:去掉markLine
想要去掉markline,要用this.option.series[0].markLine.data[0].yAxis = {},千万不要写成this.option.series[0].markLine.data[0] = {},否则会一直报错。需求:当markline的值为0的时候不显示,不为0的时候则显示。初始值都是0,然后根据自己的条件给每个markline赋值。三元运算符里要写===,我开始写成了=,浪费很多时间。我的图里有多条markline,如下定义。原创 2023-01-28 18:53:44 · 985 阅读 · 0 评论 -
echarts:面积图按照数值标记颜色
网友求助,要做如下echarts图,分析一下,这是一个基础面积图,然后超过30就标红,低于10就标黄,中间10-30的markarea区域是浅灰色,难点在于标黄的区域,它在折线上边,如果在折线下边,那就好办了。实现过程:1、先画一个面积图,然后利用visualMap来分段设置颜色。参考官网的案例但是我们这里是要根据y轴的值来设置,官网案例是根据x轴,我们需要把dimension: 0, seriesIndex: 0,去掉,然后gt、lt这里设置y轴的值。现在我们得到这样...原创 2022-05-31 12:10:13 · 2606 阅读 · 0 评论 -
echarts:把水球图放到地图上
B站看到这张图,很想学习一下,给up发了私信,可是截止到现在还没有回复,我打算自己先动手研究一下,也是一个学习知识的好机会。实现思路:刚开始的思路是,底图是3D地图,然后上面放水球图,但是水球图并不支持geo坐标,然后寻思着是地图上加散点,然后将散点的symbol设置为gif图,但是我没有美工帮我做这种图,只能作罢,而且就算有美工作图,清晰度不见得很好,symbol也不一定支持gif。继续思考,想用label的回调函数,返回html格式,结果发现label不支持返回html,又想着toolt原创 2022-05-17 20:22:49 · 630 阅读 · 0 评论 -
echarts:3D图旋转后如何恢复初始状态
1、我们需要知道,旋转角度由option.grid3D.viewControl.alpha、beta来控制。2、我们需要一个事件来触发旋转角度恢复,比如点击画布空白处的时候,旋转角度恢复到初始值,这里有一个难点是如何判断到底点的是空白区还是画布区。切记,是this.myChart.getZr().on,这个方法相当于整个页面都能响应点击,可以返回坐标值。this.myChart.on('click',function(args)这种点击只能响应echart区域,可以拿到echart具体的数据。原创 2022-05-16 15:43:20 · 1754 阅读 · 0 评论 -
echarts:map3D如何设置不同的symbol
上篇文章我们处理了map3D散点图的点击问题,发现只有一个散点的时候,点击会失效,把所有数据放在一个散点图里就可以了,那么新的问题又来了,所有数据都放一块了,该如何根据数据设置不同的symbol,这种需求很常见,比如这12条数据可以分成医院、学校和宾馆三类,每一类使用不同的symbol,但是翻看了文档,scatter3D的symbol并不支持回调函数,想要分别给散点设置symbol,那就得用循环来设置,但是使用循环设置的话,每张散点图上只有一条数据,点击又会失效……解决思路:既然只有一个散点的图原创 2022-05-16 10:50:47 · 3698 阅读 · 8 评论 -
echarts:map3D上的散点点击失效
问题描述:网友求助说他用echarts做map3D图,想要点击散点,然后获取散点里的信息,但是点击失效,困扰好几天了。发了项目给我,仔细研究了一下结构,地图是geo3D,然后利用for循环,在上面加散点图,分别给每个散点设置不同的symbol和symbolsize等,散点数据以供12条,也就是说地图上放了12张散点图,每个散点图里只有一个散点,研究了半天,也没发现有什么异常。解决过程:百度了一圈,根据一个帖子的解决方法,把geo也加入到series里去,可以触发点击事件了,但是点击获取到的只是g原创 2022-05-16 10:03:01 · 3125 阅读 · 4 评论 -
echarts:在vue中使用渐变色
1、线性渐变1.1、垂直方向的渐变以柱形图为例,如果设置柱子垂直方向渐变,只需要设置x=0,y=1即可,本案例从下往上颜色从蓝色变为红色,如果想要颜色从上往下渐变,改变offset的值即可,比如将下面的offset改为1、0.5、0,颜色就反过来了。color: { type: 'linear', // x=0,y=1,柱子的颜色在垂直方向渐变 x: 0, y: 1, colorStops: [原创 2022-05-06 14:24:44 · 6765 阅读 · 0 评论 -
echarts:切换页面图表延迟显示的问题
问题描述:从A页面(该页面通过定时器刷新图表)切换到B页面,停留一段时间,再回到A页面,图表要过一会才能显示出来。问题分析:仅仅是A页面发生延迟显示,但是B页面表现都是正常的,究其原因,A页面没有给echarts设置宽度,而B页面设置了固定的高和宽,所以A页面echarts的宽度取决于屏幕宽度。解决过程:刚开始以为是echarts内存泄漏问题,但是电脑的CPU并没有明显升高,而且也已经按照常规方法做了echarts对象的释放;之后才定位到echarts未设置宽度的问题,添加了wind原创 2022-03-02 10:13:22 · 1222 阅读 · 0 评论 -
echarts:迁徙图
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>echarts迁徙图</title> <script src="js/echarts.js"></script> <script src="js/map/js/china.js"></script> </head> <body.原创 2022-01-24 23:04:11 · 1038 阅读 · 4 评论 -
echarts:为tooltip添加链接
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>ECharts</title> <script src="js/echarts.js"></script> <style> /* 去掉链接下划线 */ a { text-decoration:none } </style>.原创 2022-01-16 20:35:19 · 1635 阅读 · 0 评论 -
echarts:silent:true去掉markline label的tooltip
当鼠标经过markline的label时,出现了tooltip,但是,这里面的信息其实跟markline无关,显示的是折线图上点的信息,为了避免错误信息显示,需要去掉markline label的tooltip显示。在markline的label里设置silent:true即可,意思是鼠标经过的时候静悄悄的,不触发事件。这是设置markline label不触发事件,不会影响到markline本身的tooltip。...原创 2021-12-24 13:57:30 · 3521 阅读 · 0 评论 -
echarts: legend自定义icon
1、引入图片。import iconUrl from '../assets/gas_station.png';2、在legend里面定义iconlegend: { data: ['审批完成', '待审批', '驳回'], icon: ('image://' + iconUrl + ''), itemWidth: 20, itemHeight: 20 },因为我这个图片是32*32像素的正方形,所以要设置itemWidth和i.原创 2021-12-16 13:25:25 · 2603 阅读 · 0 评论 -
echarts:x轴文字竖排显示
xAxis: { type: 'category', data: ['宜城', '襄城', '樊城', '襄州', '高新区'], axisLabel:{ formatter: function(value) { return value.split('').join('\n') }, } },效果图:原创 2021-12-14 18:51:23 · 1247 阅读 · 0 评论 -
echarts:带百分比的横向柱状图
var data = [220, 182, 191, 234, 290, 120, 65, 444];var barWidth = 20;var maxNum = 0;for (var i = 0; i < data.length; i++) { if (data[i] > maxNum) { maxNum = data[i]; }}option = { backgroundColor: 'black', grid: { .原创 2021-12-10 13:29:36 · 6126 阅读 · 6 评论 -
echarts:点击地图跳转到指定页面
给chart添加click监听。initEchartMap() { let mapDiv = document.getElementById('china_map'); let myChart = this.$echarts.init(mapDiv); myChart.setOption(this.options); myChart.on('click',function(args){ console.log(args.data);原创 2021-12-07 19:26:54 · 2584 阅读 · 0 评论 -
echarts:城市地图的实现
首先,到datav下载自己需要的城市json文件,datav地址如下:阿里云 DataV - 数据可视化平台<template> <div id="map_chart" style="width: 100%;height: 600px;"></div></template><script> export default { name: 'CityMap', props: { msg: String },原创 2021-12-07 16:49:52 · 1746 阅读 · 1 评论 -
echarts:解决There is a chart instance already initialized on the dom问题
if ( this.chartInstance != null && this.chartInstance != "" && this.chartInstance != undefined ) { this.chartInstance.dispose(); } this.chartInstance = this.$echarts.init(this.$refs.chart, 'light'); ..原创 2021-12-06 19:16:15 · 1367 阅读 · 0 评论 -
echarts:在折线图中添加涟漪特效散点
<template> <div id="chart" style="width: 100%;height: 600px;"></div></template><script> export default { data() { return { } }, mounted() { this.initChart() }, methods: { initChart() { var myCh.原创 2021-11-27 12:39:23 · 1537 阅读 · 0 评论 -
echarts:如何给markline配置tooltip
如果默认格式tooltip不能满足需求,可以尝试给不同的项目单独配置不同的tooltip,比如在series、markpoint、markline、markarea里配置tooltip,在echarts文档里,markline并没有包含tooltip,但其实配置后也可以生效。在不同的场景里,{b}{c}这些变量表示的含义不同,需要自己多多尝试。给markline配置tooltip的效果:...原创 2021-11-18 16:00:15 · 3321 阅读 · 0 评论 -
echarts:如何通过鼠标滚轮缩放数据?
直接在option下设置dataZoom即可,把鼠标放到折线图里,然后再滚动,才可以缩放数据。最终效果:原创 2021-11-18 15:42:27 · 5171 阅读 · 0 评论 -
echarts:Y轴名称如何竖排显示?
name: '均\n值',nameLocation: 'left',nameTextStyle: { fontSize: 14, padding: [0, 90, 0, 0] }在name里加\n换行,nameLocation设置为left,再通过padding来做一些微调。最终效果:原创 2021-11-18 15:27:20 · 2734 阅读 · 0 评论 -
echarts:如何动态设置Y轴的min和max?
min: function (value) { return Math.floor( value.min); },max: function (value) { return Math.ceil(value.max); },原创 2021-11-18 15:22:33 · 3415 阅读 · 2 评论 -
echart:legend中显示value+自定义文字样式
实现效果:1、legend的icon设置为circle(圆形)2、legend的文字分为两行,并且name和value已经后面的单位(家)文字样式都分别设置,利用富文本设置这样的效果3、legend的icon需要跟第一行对齐,通过设置name的上padding来实现对齐效果,但是这种实现比较机械,不够完美。4、在legend中显示value,这个需要使用legend的formatter回调函数,并且data要从外部引入,完整代码如下:<script&...原创 2021-09-08 18:48:31 · 9310 阅读 · 5 评论 -
echart:如何调整legend和pie之间的距离?
之前我们学习了使用grid来设置图表的边距(https://blog.csdn.net/lilycheng1986/article/details/119570518),但是我发现grid是相当于把legend和pie当一个整体来移动了,如果想要调整legend和pie之间的距离,可以分别给它俩设置left、right这些配置项,平时要多看看echart的配置文档。legend: { orient: 'vertical', left: 0,.原创 2021-09-06 15:32:11 · 6424 阅读 · 2 评论 -
echart:饼图扇形颜色和文字颜色设置
效果图:扇形颜色和文字颜色保持一致 data: [{ value: 40, name: '襄州区', // 设置扇形的颜色 itemStyle: { color: 'red' }, // 设置文字的颜色 label:原创 2021-09-02 11:30:09 · 4533 阅读 · 3 评论 -
echart:设置图表边距
我们指定了chart的宽和高后,发现图标上方有空白,并且下方也显示不完整,也是被空白遮挡住了。 <div id="chart1" style=" width:100%; height:200px;"></div>使用gird属性来设置上下左右边距。 // 设置上下左右边距 grid: { top:'3%', left: '1%', right: '1%.原创 2021-08-10 15:16:37 · 8041 阅读 · 0 评论 -
echarts:如何去掉echart的绘制动画?
在option里这样配置。// 去掉动画效果animation: false,原创 2021-04-28 15:43:06 · 6068 阅读 · 0 评论 -
echarts:tab切换效果
1、安装echarts:npm install echarts --save2、安装ant-design-vue:yarn add ant-design-vue(我用的tab组件时ant-desgin-vue的,所以要安装这个)3、main.js引入以上两位import Vue from 'vue'import App from './App.vue'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/a原创 2021-04-28 15:36:29 · 2351 阅读 · 0 评论 -
echarts:实现水球图
1、安装插件npm install echarts --savenpm install echarts-liquidfill --save2、main.js中引入import * as echarts from 'echarts'import 'echarts-liquidfill'3、组件初始化option: { series: [{ type: 'liquidFill', radius: '200px', data: [0.6.原创 2021-04-14 13:55:20 · 1617 阅读 · 0 评论 -
echarts:解决“TypeError: Cannot read property ‘init‘ of undefined”报错
解决办法:main.js中的import echarts from 'echarts'改为import*asechartsfrom'echarts'原创 2021-04-14 12:43:37 · 622 阅读 · 0 评论 -
echarts:如何在 Vue 项目中使用echarts
1、安装:npm install echarts --save2、main.js 中全局引入 echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts3、初始化实例这部分在echarts官网都有例子,写法也都类似。原创 2021-04-14 11:56:15 · 111 阅读 · 0 评论 -
echarts:中国地图实现
安装npm install echarts --savenpm install china-map --save如果china-map没有安装到echarts目录下面,记得自己复制过去,保证引用路径的正确性。<template> <div id="china_map_box"> <div id="china_map"></div> </div></template><script>转载 2021-04-28 12:02:42 · 7451 阅读 · 6 评论