echarts
文章平均质量分 86
咖啡有点酷
vue前端工程师
展开
-
echarts3D柱状图
i < 5;++i) {}option = {},},},},},},},},},},},},},{},{原创 2022-09-26 13:33:29 · 1679 阅读 · 0 评论 -
echarts 防止图形过快点击导致数据有问题
if(myChart._$handlers.click){myChart._$handlers.click.length=0;}原创 2020-11-27 20:01:54 · 440 阅读 · 0 评论 -
echarts地图 vue 中 自定义symbol
type: 'scatter', coordinateSystem: 'bmap', data: this.covertStopData(), tooltip: { show: false, }, symbol: 'image://' + require('@/assets/images/ck_icon.png'), symbolSize: [...原创 2020-11-27 15:47:38 · 1665 阅读 · 2 评论 -
echarts map地图 自定义label上添加文字及图片覆盖物
{ name: '', type: 'effectScatter', left: '50', coordinateSystem: 'bmap', // 不是这个底层的换成 geo层即可 data: convertData(data), symbolSize: '20', showEffectOn: 'render', rippleEffect:.原创 2020-11-12 11:17:53 · 11029 阅读 · 1 评论 -
echarts 柱状图点击下钻,点击外部按钮可返回
<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div style="margin-left:40%;margin-top:2%"> <button id='return-button' value=''.原创 2020-10-28 09:09:03 · 2053 阅读 · 0 评论 -
echarts 双环形toptip控制显示情况
如果想让里面的圆圈滑过不显示,在他的series里设置上animation:false,tooltip:{show:false},即可解决了原创 2020-08-06 10:01:20 · 344 阅读 · 0 评论 -
vue js对返回的数据进行过滤,去重,提取赋值
第一种情况得到一堆数组,但是只想提取某几个作为参数使用letbarand= res.data.dataletnameDataitem=barand.filter(item=>{returnitem.brandName=="大闸蟹"||item.brandName=="水稻" // 过滤出我想要的这2种类型下对应的数据});处理出的数据源,分别进行单独的参数map,使其单独形成一个对应的数组letdatas=nameData...原创 2020-07-29 17:44:04 · 3996 阅读 · 0 评论 -
vue echarts 循环多个series
let seriesdata = [] let seriesItem = [] let datayear = [] let colors = ['#0ED4E5','#F16B6C','#00ff00','#4DFF8C','#A860FF'] let datas = this.dataitem.map(v => v.produce_name) let yearItem = this.dataitem.map(v => v.year).原创 2020-07-23 10:23:25 · 1853 阅读 · 0 评论 -
echarts 地图最外边线高亮,内部不高亮
geo: { map: "kenli", zoom: 1.2, left: "25%", roam: false, //是否开启鼠标缩放和平移漫游 itemStyle: { normal: { areaColor: "rgba(0,255,255,.1)", borderColor: "rgba(0,255,255,.1)",.原创 2020-07-21 09:02:49 · 3227 阅读 · 1 评论 -
echarts 柱状图带虚线网格线,柱状渐变色,柱状阴影区
<template> <div class="lines"> <div id="farmtotel" :style="{ width: '100%', height: '100%' }"></div> </div></template><script>import echarts from "echarts"export default { data() { return {} },.原创 2020-07-15 15:13:48 · 3908 阅读 · 0 评论 -
echarts 地图区县行政规划如何做
省的,市的,自己去GitHub下载json包即可附一下地址:https://github.com/NeiHengLiu/echartsMapData 把里面你需要的省或市的json拿出来替换上就可以了下面说一下区县的如何去做首先我们打开已下载好的json包,找出你需要的区县名copy出来{"type":"Feature","properties":{"name":"垦利区"},"geometry":{"type":"MultiPolygon","coordinates":[[[坐标区域..原创 2020-07-14 17:05:45 · 324 阅读 · 0 评论 -
echarts 数据视图样式优化
toolbox: { show: true, feature: { // dataZoom: { // yAxisIndex: 'none' // }, // 区域缩放,区域缩放还原 dataView : { show : true, readOnly : true, .原创 2020-07-09 15:41:58 · 638 阅读 · 0 评论 -
echarts 多线只显示一条,legend点击事件,更换Y轴单位
yAxis: { type: 'value', name: '℃', // 默认一个单位}echarts.on('legendselectchanged', function(obj) { // legend点击事件 var option = this.getOption(); switch (obj.name) { case '火锅': option.yAxis[.原创 2020-07-08 15:56:28 · 1987 阅读 · 1 评论 -
echarts 折线+柱状图+风向角度图
/** * times:YYYY-mm-dd HHMMSS * timeData:时间 * windsData:风速 * windxData:风向/等级 * temData:温度 * ,rainData:降水 * humData:湿度 */let Data = { times: ["2019-09-08 00:00:00", "2019-09-08 01:00:0...原创 2020-03-16 08:59:30 · 1563 阅读 · 0 评论 -
echarts 占比条形图
option = { backgroundColor:'#000E1B', title:{ show: false, text:'本市危货种类占比', textStyle:{ color:'#FFFFFF' }, left:'300px', top: '30...原创 2020-03-11 14:57:01 · 3997 阅读 · 0 评论 -
echarts 树图属性设置
树图属性自定义myChart.showLoading();$.get('data/asset/data/flare.json', function (data) { myChart.hideLoading(); echarts.util.each(data.children, function (datum, index) { index % 2 === 0...原创 2020-03-11 09:09:57 · 1726 阅读 · 0 评论 -
echarts 力导向关系图
option = { title: { text: '' }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', label: { normal: { show: true, ...原创 2020-03-04 16:18:37 · 1638 阅读 · 0 评论 -
echarts Graph+lines 拓扑图(极坐标系)
// 大体思路: // 1, 节点// 2, source 和 target// 3, 错误的数据项用graph的links模拟// 4, 正确的数据项用 lines 模拟(主要是为了动画)// 5, 难题是节点多了坐标怎么计算var nodes = [{ name: 'java', value: [0, 0], symbol: '...原创 2020-03-04 16:16:55 · 3397 阅读 · 0 评论 -
echarts Graph+lines 拓扑图(直角坐标系版)
const targetCoord = [1000, 140]const curveness = 0.2const linesData = []const categories = [{ name: '流入中', itemStyle: { normal: { color: new echarts.graphic.LinearGradi...原创 2020-03-04 16:15:00 · 3247 阅读 · 0 评论 -
echarts 折线图柱状图想让X轴在上方展示(并根据当前时间进行一周推演),再根据tab切换进行视图更新
先让我们看看实现后的效果吧下面是源码还原,需要修改今天明天的更改week1的数组即可<template> <div class="boxd"> <div class="boxtop"> <span>整周监测实况</span> <ul class="titbox"> ...原创 2020-02-12 09:27:40 · 3058 阅读 · 0 评论 -
vue echarts 点击按钮切换视图(饼图)
<template> <div style="width:50%;height:100%;float:left;"> <div class="top_title"> <div class="line"></div> <span class="title">农田土壤养分含量</sp...原创 2020-01-09 10:20:50 · 4413 阅读 · 0 评论 -
vue echarts 圆环饼图
通过控制起始角度实现<template> <div style="height:100%;width:100%;"> <div id="myCharted" :style="{width: '100%', height: '100%'}"></div> </div></template><s...原创 2020-01-06 11:43:30 · 1218 阅读 · 0 评论 -
vue echarts 柱状图动态展示
轮播图形式展现<template> <div class="dan"> <div id="scalesize" :style="{width: '100%', height: '100%'}"></div> </div></template><script>import echart...原创 2020-01-06 11:38:40 · 2947 阅读 · 0 评论 -
vue echarts 常用效果处理合集
首先,先创建一个div<divid="agricultures":style="{width:'100%',height:'100%'}"></div>子承父的宽高然后importechartsfrom"echarts",页面内引入mounted(){ //执行methods事件this.drawLine();},...原创 2020-01-06 11:35:16 · 340 阅读 · 0 评论 -
vue echarts 环形饼图 带极坐标圈
效果图 :结构 <divid="allevi":style="{width:'100%',height:'100%'}"></div>importechartsfrom"echarts";export default { data() { return { povertyItem: [] //定义需要的data数...原创 2019-12-17 16:46:59 · 2025 阅读 · 0 评论 -
vue echarts 山东地图 toptip滑过提示显示文字 合并莱芜的
importechartsfrom"echarts";importgetCityListsfrom"../../../json/shandong.json";import{接口}from"@/api/接口.js";接口方法名().then(res => { myChart.showLoading(); echarts.re...原创 2019-12-16 10:16:40 · 967 阅读 · 2 评论 -
echarts 横向TOP排名,可设置前三名配色
let myColor = ["#1089E7"]; //设定柱状图颜色 let opt = { index: 0 }; myChart.setOption({ grid: { top: "1%", left: "10%", right: "15%",...原创 2019-12-16 10:23:24 · 5159 阅读 · 1 评论 -
ECharts3D地图 山东地图(济南合并莱芜)vue 带点击联动事件
<!-- map --><template lang="html"> <div class="echbox"> <div id="main-map" class="map-show-wrapper" style="height:100%;width:100%;"></div> </div></tem...原创 2019-12-11 16:30:34 · 2382 阅读 · 1 评论