
Vue+Echart
数据可视化
a772116804
努力又平庸 ,自卑又内敛 。
展开
-
echarts 地图开发 地图打点与连线
文件中的 cp 字段获取,正常的开发中经纬度会由后端接口返回。第二步在 series 数组中添加。代码中的经纬度将会通过。转载 2025-04-21 14:55:00 · 53 阅读 · 0 评论 -
Vue+echart 图根据网页自适应resize缩放
【代码】Vue+echart 图根据网页自适应resize缩放。原创 2023-04-06 19:14:17 · 2439 阅读 · 0 评论 -
echarts地图 设置地图某一区域颜色
在geo-》regions中添加相关配置即可。转载 2025-04-21 11:23:03 · 131 阅读 · 0 评论 -
echart、饼状图半圆实现方法
下面180°的图形,只是将图形通过rgba(0,0,0,0)隐藏了,在实际场景中需要调整 center: ["50%", "70%"]来控制具体的显示方式。转载 2025-03-11 16:26:33 · 68 阅读 · 0 评论 -
Echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
echart没有滚动条概念,有配置选项类似滚动条,通过手段模拟滚动条效果....省略很多字(难)转载 2024-05-06 11:24:34 · 3773 阅读 · 0 评论 -
Echart 折线设置为虚线
【代码】Echart 折线设置为虚线。转载 2024-03-12 14:08:49 · 2298 阅读 · 0 评论 -
echrts 全国地图、各省市地图json文件下载、“cp“ 调整地图上的地名文字位置
DataV.GeoAtlas地理小工具系列原创 2024-02-23 17:07:38 · 507 阅读 · 1 评论 -
Vue 中echartsX轴Y轴的点击事件
日常开发中用到echarts,一般是用来展示数据,很少在图表上添加一些事件监听函数。但是没用过不代表没有,比如鼠标悬浮之后的高亮样式和鼠标悬浮后显示的tootip,这都属于默认的鼠标悬浮事件。)触发的是zrender事件,echarts事件是在zrender事件的基础上实现的,当一个zrender事件在图形元素上被触发时,echarts才会触发一个echarts事件。除此之外,如果想要实现其他的事件响应,可以监听这些事件,然后通过回调函数做出相应处理。ECharts中的事件与行为。监听图表空白处的事件。原创 2022-12-27 18:25:43 · 4014 阅读 · 0 评论 -
Echart 双图使y轴0刻度对齐/折线和统计图上下分离、不重叠
【代码】Echart 双图使y轴0刻度对齐/Echarts双y轴0刻度线不对齐解决思路。转载 2022-10-13 18:29:32 · 2934 阅读 · 0 评论 -
Echarts 折线图小圆点修改为实心symbolSize,折线图下方半透明效果
标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。其中第一个参数 value 为 data 中的数据值。所以symbolSize可以全局设置和局部设置两种方式,值的设置方式有两种,单值和双值的形式。2.双值形式:symbolSize: 【3,4】 (宽高)方法一:在data的每一项中去设置 symbolSize。1.单值形式:symbolSize: 4。数据的设置的方式区分全局和局部。通俗点就是更改标点的大小。转载 2022-10-09 19:18:23 · 10623 阅读 · 0 评论 -
ECharts动态改变柱状图柱子上方显示文字颜色、修改单个柱子的颜色等
ECharts动态改变柱状图柱子上方显示文字颜色原创 2022-06-02 09:56:31 · 4031 阅读 · 0 评论 -
Echarts 取消点击事件
if (type ==1) {//切换成地市就给echart加点击事件 this.chart.on("click", param => { //给echars 添加点击事件 this.$emit("sendInvoiceDialog"); }); } else { this.chart.off("click") //取消echarts 点击事件}...转载 2022-04-02 16:28:09 · 5677 阅读 · 0 评论 -
Echarts yAxisIndex配置多个y轴的最大值最小值
echarts配置多个y轴_weixin_30394333的博客-优快云博客echarts配置多个y轴的时候,需要加上: yAxisIndex: 1 yAxis: [ { type: "value", name: "单位: 次", max: 1000, scale: true, nameGap: 40, nameTextStyle: { color: "#fff", fontS....转载 2022-02-17 16:23:29 · 5249 阅读 · 0 评论 -
Vue echarts x轴或y轴文本字体颜色改变、设置x轴间隔显示 interval: 1
echarts x轴或y轴文本字体颜色改变 - 童心小城 - 博客园1:x轴文本字体颜色改变xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-','>=70'], axisLabel: {转载 2021-12-30 16:31:42 · 2896 阅读 · 0 评论 -
Echarts 柱状图tooltip 数值后加百分号、内容居中、tooltip添加背景图片
echarts tooltip 数值后显示 % - _houjie - 博客园需求:要求 echarts 在鼠标 hover 时可以看到数据后面显示百分号(数据已是后台处理过的)。效果图:代码:tooltip: { trigger: 'axis', formatter: function(params) { var result = params[0].name + "<br>"; pa转载 2021-11-22 10:13:21 · 6363 阅读 · 2 评论 -
Vue echart大屏幕数据可视化
Make A Pie转载 2021-10-09 15:07:26 · 394 阅读 · 0 评论 -
Vue 中echarts动态修改的容器大小、宽度
https://blog.youkuaiyun.com/aerbaba/article/details/81451620<div style="width: 100%; overflow: auto"> <div id="RobotEchartlen" ref="tendencychart" style="height: 270px" ></div></di.转载 2021-04-30 15:18:03 · 2741 阅读 · 4 评论 -
Vue中使用echarts,echarts 封装以及使用的事项
1.安装echarts依赖 npm install echarts --save2.在main.js中全局中引用import echarts from 'echarts'Vue.prototype.$echarts = echarts3.在你需要用到echart的地方先设置一个div的id、宽高,例子:<div ref="chart" style="width:100%;height:376px"></div>然后我们要在mounted生命周期函数..原创 2021-01-27 16:28:31 · 2027 阅读 · 1 评论 -
Vue 中echarts的数据参数使用、X轴Y轴
https://www.cnblogs.com/tugenhua0707/p/9380378.htmlhttps://blog.youkuaiyun.com/qq_28691187/article/details/112462859https://blog.youkuaiyun.com/u012612399/article/details/53838326eCharts——柱状图中的柱体颜色渐变https://blog.youkuaiyun.com/qq_36538012/article/details/115413879E...原创 2021-04-13 16:46:09 · 12812 阅读 · 1 评论