ECharts
winne雪
记录点滴~帮助你我他❥(づづ)╭❤~
展开
-
echarts扇形图(饼图)常用的配置
1、效果图:2、完整代码:(可以直接贴到echarts官网进行测试查看效果)option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c}%' }, legend: { orient: 'vertical', ...原创 2020-03-30 16:02:53 · 4685 阅读 · 0 评论 -
vue中处理echarts因v-if切换后图形显示异常+实现echarts监听窗口变化而改变大小
一、处理echarts因v-if切换后图形显示异常有时候我们需要在一个页面中使用v-if来显示不同的两个图表。视觉效果上好像是从一个页面点击链接跳转到另一个页面,但其实原理是通过销毁和重建两个不同dom容器来实现这个效果。可能会出现的问题:在切换到另一个图表显示的时候,改变了窗口宽度高度,那么点击返回按钮时看到原先的echarts图形就会有一部分消失显示不完整了。解决办法:我们需要在返...原创 2019-11-12 14:44:44 · 3790 阅读 · 2 评论 -
Echarts实现中国地图线路图特效(一对多发射点)
1、效果图2、完整配置代码可以把代码直接贴到官网测试效果:https://www.echartsjs.com/examples/zh/editor.html?c=map-polygon// 中国地图线路特效配置 startlet geoCoordMap = { // 地图地点的经度纬度 '上海': [121.4648, 31.2891], '东莞': [113.89...原创 2019-10-29 14:43:55 · 9151 阅读 · 10 评论 -
Echarts实现中国地图涟漪点分布
1、效果图2、完整配置项代码可以直接把代码贴到官网看效果:https://www.echartsjs.com/examples/zh/editor.html?c=map-polygonoption ={ backgroundColor: '#0c1c30', // 图形容器背景色 tooltip: { // 鼠标移到涟漪点上的浮动提示框 borderWi...原创 2019-10-28 18:18:22 · 2769 阅读 · 0 评论 -
echarts双正x轴条形图
一、效果图:二、配置代码let option = { title: { text: 'TOP10' }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'...原创 2019-10-23 18:09:53 · 9537 阅读 · 3 评论 -
vue中使用ECharts实现中国地图配置详解(配官方配置地址)
前言:1、实现自定义左下角的视觉映射组件(包括自定义颜色、文字、图元大小)2、实现自定义悬浮提示框如下图所示:实现步骤:一、在vue中安装echarts1、npm install echarts二、在vue组件中使用echarts1、在组件中先引入echartsimport echarts from 'echarts' // 引入echarts中国地图数据2、在组件中引入中国...原创 2019-06-16 17:15:30 · 22942 阅读 · 18 评论 -
ECharts多折线图——自定义悬浮提示框内容、自定义折线图线条颜色、自定义y轴单位、气泡单位,轴线颜色、图表网格容器大小
1、自定义tooltip悬浮提示框内容(数据处理后加单位),需要在tooltip配置项的formatter使用回调函数的形式参数详解:https://echarts.baidu.com/option.html#legend.formatter2、自定义折线图线条颜色,直接在color配置项数组中写自己喜欢的颜色,在线条绘制的时候就会在数组中自动选择。具体如下配置:option = { ...原创 2019-06-16 18:24:15 · 10727 阅读 · 0 评论