![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
echarts
echart学习记录
sunnyboysix
软件工程
展开
-
vue echarts地图省市区下钻
一 项目做了一个省市区下钻带上颜色还是挺好看的,项目代码是肯定不能放出来的然后手撸了一个demo版本的没了设计是真的丑啊二 直接上代码这就是上面丑丑的省市区,代码没优化,撸出来什么样就是什么样,看着这几个if 感觉自己好low, 但是比较直观哈哈哈low就low吧,尾部我把用到map json丢上来就完整了,待会看看能不能优化一下<template> <div class="MapChart"> <d......原创 2021-11-09 18:31:25 · 3538 阅读 · 19 评论 -
Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be
charts在控制台报出这个警告挺有意思的, <div class="MapChart"> <div ref="MapArea" class="echarts"></div> </div><style lang="less" scoped>.MapChart { width: 100%; height: 100%; // .echarts { // width: 100%; // he.原创 2021-11-09 17:16:51 · 3768 阅读 · 0 评论 -
echarts折线图上每个点上引入icon图片
效果还可以添加判断现实部分使用markpointmarkPoint: { data: item.data.map((qitem, qindex) => ({ coord: [qindex, qitem], symbol: `image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAAL..原创 2021-09-14 20:09:15 · 2854 阅读 · 1 评论 -
echarts去除dataZoom 背景堆积图
去除后无堆积图showDataShadow: false,原创 2021-09-08 17:49:56 · 853 阅读 · 0 评论 -
echarts折线图根据y轴间距加间隔颜色
效果图yAxis: { splitArea: { show: true, areaStyle: { color: ['rgba(20,20,20,1)', 'rgba(200,20,20,1)'] } }}具体可参考echarts官方配置:https://echarts.apache.org/zh/option.html#yAxis.splitArea..原创 2021-09-01 17:21:40 · 1043 阅读 · 0 评论 -
echarts使用div模拟y轴坐标
具体效果下面写1 使用splitNumber将y轴平均分2 上图截图蓝色部分是固定的, 可以取出y轴的高度:style="{ 'height': `${ 100 / data.yList.length}%`}div平均分y轴的高度3 使用flex 垂直居右height: 100%; display: flex; align-items: center; text-align: right; justify-content: f..原创 2021-06-10 18:19:36 · 292 阅读 · 0 评论 -
echarts散点图markline连接多个点
一效果图二 代码markLine中是数组格式 lineStyle可以修改连线的颜色{ type: 'scatter', symbolSize: 6, label: { show: true, position: 'insideTop', fontSize: 14, lineHeight: 16, .原创 2021-03-01 17:06:39 · 3423 阅读 · 7 评论 -
echarts 中 markLine垂直于X轴线, 折线图上新增区域块加颜色markarea
一 效果图二 代码{ data: [0.54, 0.52, 0.72, 0.82, 0.44, 0.36, 0.82, 0.52, 0.74], type: 'line', markLine: { lineStyle: { width: 3, color: '#F7B500', },原创 2021-02-01 14:33:08 · 7207 阅读 · 5 评论 -
echarts圆环象性图,实现从低向上渲染颜色
一效果图场景应用图二 代码var symbols = [ 'path://M480 64C250.24 64 64 250.24 64 480 64 709.76 250.24 896 480 896c229.76 0 416-186.24 416-416C896 250.24 709.76 64 480 64zM480 832C285.44 832 128 674.56 128 480 128 285.44 285.44 128 480 128 674.56 128 83原创 2021-01-29 16:01:48 · 324 阅读 · 0 评论 -
vue echarts在中国地图鼠标经过同一指标下的多个省份高亮或凸起
一 效果图二 代码样式自己调试itemStyle: { //区域边形样式 emphasis: { color: dataList.forEach(item => { return `rgba(158, 51, 98, ${item.value.toFixed(0)})` }), //borderColor: '#000', ...原创 2021-01-13 10:20:32 · 2902 阅读 · 0 评论 -
vue echarts在中国地图让某个省份凸起
一 效果图二 代码itemStyle: { //区域边形样式 emphasis: { color: dataList.forEach(item => { return `rgba(158, 51, 98, ${item.value.toFixed(0)})` }), //borderColor: '#000', // sh原创 2021-01-12 18:59:25 · 3093 阅读 · 0 评论 -
vue中使用echarts中国地图
一效果图二 上代码封装的完整的地图组件,里面注释了很多就不解释了<template> <div class="mapContent"> <div ref="MapArea" class="echarts"></div> </div></template><script>import 'echarts/map/js/china' //导入echart的中国地图插件 export d原创 2021-01-06 17:01:14 · 1314 阅读 · 0 评论 -
vue中使用中国地图scatter散点图
一 效果图二 上代码封装好的组件可以直接使用,根据自己数据传入props<template> <div class="mapContent"> <div ref="MapScatter" class="echarts"></div> </div></template><script>import 'echarts/map/js/china' //导入echart的中国地图插件 e原创 2021-01-06 17:08:42 · 2076 阅读 · 1 评论 -
在elementui中el-tabs切换echarts宽高不自适应的问题
切换时候会新增一个display:none 然后就成一坨了解决办法:等每次触发的时候渲染就可以了原创 2020-09-23 17:51:32 · 1754 阅读 · 4 评论 -
echarts 轴线上年月两行展示且相同的年份不展示
一 效果截图二 上代码xAxis: { type: 'category', boundaryGap: false, data: ["2018/07", "2018/08", "2018/09", "2019/10", "2019/11", "2019/12", "2020/01", "2020/02", "2020/03"].map((item) => { let front = item原创 2020-08-21 18:03:10 · 923 阅读 · 0 评论