ECharts
全国各乡镇的边界数据，json格式适配echarts；
湖南省的数据现有，联系我获取（免费、帮我看一下小程序）； 其他省份可通过联系我用脚本获取（要手动输入验证码），或者网站获取（tips：每个区县需要一个个手动下载，且每个下载需要输入验证码）： https://www.poi86.com/ ......
ECharts随笔
EChats的loading ECharts中有自带的loading方法 showLoading() 通常搭配 hideLoading()使用 1 xxx.showLoading({ 2 text: "数据正在路上...", 3 color: "#409eff", 4 textColor: "#00 ......
使用echarts画流程图
# 场景 流程图中涉及到弯曲的箭头，使用普通的css是画不出来的，至少我是没想到办法。 # 效果图  # 代码 ```j ......
react中简单使用echarts图表
1：下载echarts-for-react插件 2：组件内引入 import ReactEchatrs from 'echarts-for-react' 复制echarts官网图表的option 例如：柱形图的option react组件内 定义函数存放复制的option 并返回 import Re ......
推荐几个优秀的echarts图表网站
[ppchart](http://ppchart.com/#/) [makeapie](https://www.makeapie.cn/echarts) [madeapie](https://madeapie.com/#/) [MCChart](http://echarts.zhangmuchen. ......
echarts中legend实现排列对齐
## 问题 当图表中的 legend 过多的时候，就需要考虑 legend 进行换行，但是换行之后，图例就会无法对齐。 ## 解决 ``` legend: { icon: "rect", width: "80%", itemWidth: 6, itemHeight: 6, bottom: 0, te ......
微信小程序使用echarts动态设置宽高
微信小程序中动态设置了echarts的高度，但是canvas变形，并没有重新resize ## 原因 chart获取不到父组件的宽高，小程序里获取宽高用的是 wx.createSelectorQuery() ，echarts里resize的时候，并没有调用这个API，肯定无法重置宽高。 ## 解决 ......
vue循环生成echarts图表
1. 效果图 2. 引入echarts npm install echarts --save 3. main.js全局引入 4. 页面 data数据是从后台接口中返回的，需要通过watch监听来获取created方法中获取到的数据。用mounted由于是异步调用，是获取不到created中的数据的。 ......
Vue中使用Echarts---小记
# Echarts使用小结 > vue环境使用echarts ## 1. 柱状图 ### 1.1 分析 **当前需求：** - 有横向滚动条； - 柱条的颜色为渐变色； - 鼠标悬浮自定义展示（展示数据百分比） **示例图：**  => { const result = params.map((item, index) => { const str = item.name.substring(0, 1); if (echartsBarData[i ......
Vue中使用Echarts可视化图表
1、首先在项目中安装Echarts 1 npm install echarts 2 npm install echarts --save 2、在项目 main.js 中全局引入 1 import echarts from 'echarts' 2 // 挂载到vue原型上 3 Vue.prototyp ......
echarts的词云图使用
### 问题原因 echarts2.0版本之后不再在引入的echarts中支持wordCloud,需单独引入。引入原js或者min都可以 ### 安装 ``` npm install echarts@5.3.3 ``` ``` npm install echarts-wordcloud@2.0.0 ......
Echarts中柱状图的基本设置
Echarts - 去掉图表横纵坐标轴刻度线 效果图 去掉前： 去掉后： axisTick: { show: false } X轴Y轴文字颜色和大小的设置 axisLabel:{ textStyle:{ color:"#f9f9f9", fontSize:12 } } X轴Y轴刻度线的颜色和宽度的设 ......
Echarts中柱状图渐变色
series绘制图表本身 name: '基站数目', type: 'bar',：图表类型（柱状、折线…） 是否在柱形图上显示数字 ：label: { show: false, position: 'insideRight', ... } 设置柱状图宽度：barWidth 实现柱状体渐变色： item ......
echarts 实时动态修改markline
效果图: 如果要固定显示markline的值就写在series.markLine.data数组里。 我这里的markline的值是通过websocket返回的，数据发生变化时，markline的值也跟着变化 监听到websocket返回值时: let o = myChart.getOption() ......
echarts记录篇(三 )：使用横向柱状图实现左侧分类对齐右侧显示数据效果及数据过多加滚动条无缩放效果
一、效果如下： 二、直接上代码 上一篇已经说过左侧分类，右侧数据对齐的方法，如果需要移步上篇， 此篇主要是纵向滚动条功能，代码如下： dataZoom: [ { type: "slider", realtime: true, // 拖动时，是否实时更新系列的视图 startValue: 0, end ......
echarts记录篇(二 )：使用横向柱状图实现左侧分类对齐右侧显示数据效果
一、效果图如下： 二、直接上代码 yAxis: [ {//左侧name分类 inverse: true, //如果数据数组倒置排序，加上此代码 data:categories1, axisLabel: { fontSize: 16, color: '#fff' }, axisLine:{ show: ......
echarts记录篇(一)：使用柱状图实现排名前边有排序数字
一、效果如图： 二、直接上代码 yAxis: { inverse: true, //如果数据数组倒置排序，加上此代码 data: categories1, offset: 0, axisLabel: { fontSize: 18, color: "#5DB3DC", margin: 130, // ......
vue使用echarts图表，有一个组件：v-charts
# 介绍 在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。 ......
echarts实现词云图（echarts-wordcloud）
项目背景 展示一些协议UI给的设计图是采用词云图实现，今echarts官网看了看，发现废弃了，于是百度查了一下，一下是个人使用总结。 页面最终展示效果 实现步骤如下： 1. 安装依赖，下载插件（由于代码比较老旧，所以我的echarts都不是最新的）， echarts-wordcloud是基于echa ......
原生js使用ECharts
<script type="text/javascript" src="js/echarts.min.js"></script> html <div id="chartContainer" style="width: 600px; height: 400px"></div> js var chart ......
echarts 地图可视化
https://echarts.apache.org/examples/en/index.html 找到 geo/map 实例，参考代码 https://echarts.apache.org/zh/builder.html 创建 echarts.js 用于离线使用 https://geo.datav ......
EchartS使用文档
# EchartS使用文档 ## 1.新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。 ``` ECharts ``` ## 2.新建 ``` ``` ## 3.新建``` ``` ## 4. ``` ``` ## 5.浏览器中打开echarts.html，就 ......
echarts基本使用和封装
# 使用setOptions设置配置项时最好设置第二个参数为true ## 需求：点击按钮只是更新某个series的数据 下面产生的问题：某个series的数据是更新了，但是还保留着其他series的数据，这是echarts做了`性能优化` > 参考文档：https://echarts.apache ......
记录--用Echarts打造自己的天气预报！
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 最近刚刚学习了Echarts的使用，于是想做一个小案例来巩固一下。项目效果如下图所示： 话不多说，开始进入实战。 创建项目 这里我们使用vue-cli来创建脚手架： vue create app 这里的app是你要创建的项目的名称， ......
echarts柱状图设置选中阴影宽度
tooltip: { trigger: 'axis', axisPointer: { type: 'line', lineStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#19 ......
前端echarts组件问题合集（渲染、传参、高度...）
1、echarts环形图设置主标题text和副标题subtext在环形图中居中显示 可以通过设置主标题和副标题的textAlign来设置，title textAlign methods: { initChart() { let self = this; // {height:'250px'} 设置t ......
echarts5.0 去掉 hover 折线变粗方法
## 问题 今天 echarts 版本更新至5.1.2，发现鼠标悬停在折线图上，折线变粗，这个效果和我的需求相悖，所以想办法去掉此效果 ## 解决 **emphasis** ：折线图的高亮状态。 **设置emphasis.lineStyle和折线图本身lineStyle相同即可** ``` let ......
vue3封装echarts组件数据更新不同步问题
# vue3封装echarts组件数据更新不同步问题 > 背景： 记录一下项目中遇到的bug，在vue3+echarts环境下，为了方便使用，我将echarts封装成组件使用，使用的时候只需要把对应的值传入给chart组件就行，但是在传入真实数据的时候遇到了问题，就是传入value值与图表组件显 ......
浏览器全屏时 echarts.resize() 无效/滞后解决办法
前言 echarts 在 dom 上初始化时使用 echarts. init ，这个 dom 是实例容器，一般是一个具有高宽的 DIV 元素。 不能在单个容器上初始化多个 ECharts 实例。 echartsInstance.resize 改变图表尺寸，在容器大小发生改变时需要手动调用。 echa ......