echarts
qq_36437172
这个作者很懒,什么都没留下…
展开
-
echarts 圆环图渐变
效果图如下:主要属性说明:{ name: '状态', type: 'pie', radius: ['25%', '36%'], avoidLabelOverlap: false, // 不启用防止标签重叠策略 data: [ { value: 330, name: '正常', itemStyle: { color: { type: 'linea转载 2020-05-15 00:18:52 · 4435 阅读 · 1 评论 -
echarts 极坐标实现【环形】柱状图
效果图如下:polar 极坐标属性配置:polar: { center: ['50%', '50%'], // 中心(圆心)坐标 radius: '100%' //图形大小},angleAxis极坐标系的角度轴:angleAxis: { max: 100, // 满分 clockwise: false, // 逆时针},radiusAxis极坐标系的径向轴:radiusAxis: { type: 'category',},..转载 2020-05-15 00:06:05 · 5668 阅读 · 2 评论 -
echarts legend 排列问题
我们可以看看下面效果图:legend.orient:图例列表的布局朝向。可选:'horizontal'、'vertical'。legend.icon:图例项的 icon。除了 echarts 官方提供的标记类型,还支持 图片链接和矢量图。legend.align:图例标记和文本的对齐。可选:'auto'、'left'、‘right’。legend 图例组件可以分组。legend: [ { icon : 'bar', data : [ '直接访原创 2020-05-14 18:17:48 · 10035 阅读 · 0 评论 -
echarts 路径图
路径图:用于带有起点和重点信息的线数据的绘制,主要用于地图上的航班,路线的可视化。支持二维的直角坐标系和地理坐标系。我们先来看看官方案例:https://echarts.apache.org/examples/zh/editor.html?c=geo-lines。下面我们来详细介绍一下,主要的属性。效果图如下:series 是要绘制的地图的主体。series 是一个数组,也就是说可以有多个数据进行绘制。这里有两个,一个是两个城市的连线,一个是对两个城市进行高亮显示。其中的 type 是很重要的参数,原创 2020-05-14 17:30:13 · 7626 阅读 · 6 评论 -
echarts 地图类型热力图
地图主要用于地理区域数据的可视化,配合visualMap组件用于展示不同区域的人口分布密度等数据。visualMap 是视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。echarts 官网案例:https://echarts.apache.org/zh/option.html#visualMap-piecewise。除了可以在地图上打点之外,我们如何在地图上做热力图呢?效果图如下:首先介绍visualMap 视觉映射组件。visualMap: { ...原创 2020-05-14 16:25:13 · 10594 阅读 · 1 评论 -
echarts 柱状图渐变色背景
如何制作柱状图渐变色背景,我们可以先参考echarts 柱状图颜色设置。接下来我们来实战一下,看看这次的效果图吧。首先我们可以看到,X 轴表示数据,Y轴表示类别。柱状图上有该地区的数量,同时柱状图颜色从左到右是渐变色,在渐变色的尽头我们可以看到给柱状图添加的圆角。一、设置 XY 坐标轴xAxis: { type: 'value', show: false},yAxis: { type: 'category', axisLabel: { .原创 2020-05-14 11:03:02 · 6916 阅读 · 0 评论 -
echarts 地图上如何打点
这里介绍如何在地图上进行打点.首先我们想到的是scatter (散点图).这里echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点有详细介绍,请参考.这里我介绍另一种打点方式.地图中提供markPoint 图表标注。标记图形 symbol这里除了 echart 提供的标记图形之外,我们也可以通过图片链接或者图标的矢量路径作为标记的图形.除了设置基本的图形大小,这里我来说下,标记的数据数组.标注的数据数组 data如何指定标注的位置呢? 标注的数...原创 2020-05-13 18:51:40 · 8114 阅读 · 0 评论 -
echarts 多个 geo 实现缩放拖拽同步
需求: 通过设计稿可以看到,我们需要双层的地图,但是地图间有点错位的那种效果.如果我们分别制作两个同样大小地图,只是定位有些错位的话,当我们对地图进行拖拽或者缩放的时候,无法两个地图同时进行拖拽和缩放操作,此时我们引入多个 geo 来实现同步缩放和拖拽功能.如何设置多个 geo 呢?geo: [{ zlevel:2, //geo显示级别,默认是0 map: 'china',//地图名 type: 'map', roam: true,//设置为false,不启转载 2020-05-13 18:00:21 · 7580 阅读 · 4 评论 -
echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点
一、设置地图外边框给地图添加外边框,同时地图中的区域添加细一点的边框。效果图如下:这里涉及两种边框 ,分别在 geo 和 series 种设置 。主要代码如下:option = { backgroundColor: '#000',//画布背景颜色 geo: { show: true, map: 'china', label: { show: false }, roam:.原创 2020-05-13 16:15:36 · 25980 阅读 · 28 评论 -
echarts 图表加水平直线或者标准线
如果给 echarts 水平添加一条控制下,效果图如下:我们只需添加一个每个月的数值都是一样的,去除掉折线上面的点即可,代码如下:var option = { ...... series: [ { name: '控制线', type: 'line', symbol: 'rect',...原创 2020-05-04 18:59:24 · 13423 阅读 · 3 评论 -
echarts 动态加载 legend 时候的坑
当echarts动态加载legend的时候,我刚开始这么写的:var myChart = echarts.init(element.find("#mpuchart").get(0));var option = {tooltip: {trigger: 'axis'},legend: {data: []}...原创 2020-05-04 17:33:16 · 1825 阅读 · 0 评论 -
There is a chart instance already initialized on the dom
使用Echarts插件的时候,多次加载会出现There is a chart instance already initialized on the dom.的警告,意思是DOM上已经初始化了一个图表实例。解决办法:在使用Echarts插件的方法,调用 echarts.dispose() 方法先将图表销毁,然后再初始化就不会出现警告了。var optionOne = {...}ec...原创 2020-05-04 17:32:14 · 397 阅读 · 0 评论 -
echarts 柱状图颜色设置
如果给柱状图设置颜色,我们执行在 option 中 传入 color 字段的一个数组。代码如下:option = { color: ['#2EB7BD', '#3CE1D9', '#FBBACB', '#4695D1'], ...}上面是根据柱状图 legend 中 data 进行颜色区分。如果我们只有一个类别,分别给xAxis 上的柱状图进行颜色区分,代码如下:...转载 2020-03-28 21:31:41 · 10080 阅读 · 0 评论 -
echarts 添加百分号
效果图如下:根据后端的数据来源,前端渲染页面时,需要前端自行给页面添加 % 。根据上图效果,可以看到有两个地方需要添加 % 的。一个是是悬浮框提示信息里面,另一个地方柱状图上方需要添加 %。首先我们给悬浮添加 %,需要操作tooltip 下的 format ,代码如下:tooltip: { trigger: "axis", axisPointer: { // 坐...原创 2020-03-14 18:35:18 · 5632 阅读 · 0 评论 -
关于echart 动态数据,使用dataZoom精确控制显示数据数量
echarts为我们提供了dataZoom 组件,当数据过多时就有了它的用武之地,业务场景:数据返回100调可是为了前端显示效果默认只显示20条,其他数据由dataZoom控制显示隐藏:getDate() { this.showloading = true; this.nodata = false; let data = { ... }; this.$axios({ ...转载 2020-03-14 17:27:14 · 4545 阅读 · 2 评论 -
vue echarts 动态添加 series 数据
何为动态添加 series 数据?由于 series 中的个数是动态的,通过接口返回的,我们需要对series 做动态处理。处理动态 series 的数据:let result = [{"name": "大修","data": [0]},{"name": "二保","data": [101]},{"name": "事故","data": [0] }, {"name": "外修","...原创 2020-02-18 17:47:54 · 8165 阅读 · 0 评论 -
echarts 自定义X轴、Y轴的滚动条
第一种方式:通过dataZoom 属性缩放进行配置滚动条。//给x轴设置滚动条dataZoom: [{ start:0,//默认为0 end: 100-1500/31,//默认为100 type: 'slider', show: true, xAxisIndex: [0], handleSize: 0,//滑动条的 左右2个滑动条的大小 ...原创 2020-01-12 11:47:40 · 4561 阅读 · 0 评论 -
Echarts 中如何设置圆环空隙
先上效果图,如下:如何制作圆环之间的空隙呢?option = { backgroundColor:'#fff', series: [ { itemStyle:{ borderWidth:5, //设置border的宽度有多大 borderColor:'#fff',...原创 2020-01-12 10:19:44 · 9185 阅读 · 4 评论 -
echarts 标签文字过多导致显示不全解决方案
echarts x轴标签文字过多导致显示不全如图:解决办法1:xAxis.axisLabel 属性axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的)axisLabel: { interval:0, rotate:40 } 显示不全并将文字倾斜。如图:稍微解释一下interv...转载 2020-01-12 11:18:44 · 1901 阅读 · 0 评论 -
echarts 图例 legend 取消点击事件 / 添加点击事件
一、legend 取消点击事件legend:{ selectedMode:false,//取消图例上的点击事件 data:['浏览量','访问量']}二、legend 添加点击事件图例组件用户切换图例开关会触发该事件。myChart.on('legendselectchanged', function(params) { var option = this....转载 2019-12-15 21:55:11 · 12320 阅读 · 2 评论 -
vue 封装的 echarts 组件
在vue项目中使用echarts,步骤如下:(1)安装echarts依赖npm install echarts -S (2)引入echarts,可全局引入和按需引入全局引入:// 引入echarts --- 在 main.js 中import echarts from 'echarts'Vue.prototype.$echarts = echarts 在 echa...转载 2019-03-04 11:54:00 · 4155 阅读 · 0 评论 -
vue 封装的 echarts 组件被同一个页面多次调用,数据被覆盖问题解决办法。
子组件:<template> <div> <div id="myChart" :style="echartStyle"></div> </div></template>echarts init 选择 id选择器元素来初始化了this.charts = this.$ech转载 2019-03-04 11:54:17 · 6771 阅读 · 1 评论