echart php mysql简书_echart 踩坑之路
资料
漫漫踩坑路
1. 在低分辨率的电脑上使用时，出现文字和图表模糊的情况。
问题解决前后的展示截图(截图被压缩了，实际效果比较明显)
显示模糊的展示截图
问题解决后的展示
产生问题的原因
canvas 在使用的时候给的 width 和 height 与实际展示出来的宽高比例不为 1:1，造成像素值的偏离
canvas 标签截图
解决问题
解决参考地址
具体添加代码
null, {devicePixelRatio: 2}
2. 隐藏掉柱形图表的数据分裂线，因为两次的比例不同造成重叠了
示例图片
隐藏前
隐藏后
设置的方法
option.yAxis[index].splitLine.show: false
3. 多种数据时 series[index] 引用不同的 yAxis 设置，以及在 series[index] 中嵌套数据
示例图片
示例图片
【月收入】数据使用的是左侧的数据作参考，【同比】使用的是右侧的百分比数据作参考，【TO】使用的也是左侧的数据作参考
总的展示方案：
【月收入】数据中单独展示出【TO】的一行数据，这两个数据都是以左侧为参照，【同比】数据单独展示，并 以右侧为参考
option 配置代码展示
opation = {
title: {
text: '月收入趋势',
textStyle: {
fontSize: 17,
fontWeight: 800,
color: "#37394C"
},
left: '1%',
top: "5%"
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '2%',
right: '2%',
top: "20%",
bottom: '5%',
containLabel: true
},
legend: {
data: ['月收入', '同比',
{
name: 'T0',
icon: 'image:///static/img/module/index/S.png'
}
],
top: 15,
selectedMode: false,
formatter: function (data) {
return data + " ";
}
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
},
axisLine: {
show: false,
color: '#8795A8'
},
axisTick: {
show: false
},
axisPointer: {
type: 'line'
},
axisLabel: {
textStyle: {
color: '#8795A8',
}
}
}],
yAxis: [
{
// 月收入 规则
type: 'value',
min: 0,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#8795A8',
}
}
},
{
// 同比 规则
type: 'value',
min: -5,
// 起始线是否显示
axisLine: {
show: false
},
// 起始线延长出的分裂线是否展示
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value} %',
textStyle: {
color: '#8795A8',
}
}
}
],
series: [
{
name: '月收入',
type: 'bar',
color: '#3E82FE',
barWidth: 20,
// 嵌套【TO】数据
markLine: {
symbol: 'none',
silent: false,
itemStyle: {
normal: {
borderWidth: 2,
lineStyle: {
type: 'dashed',
color: '#D0021B',
width: 1.5
},
}
},
data: [{
yAxis: $T0
}]
},
data: $incom
},
{
name: '同比',
type: 'line',
symbolSize: 8,
color: '#01BF8F',
// 使用【同比】规则
yAxisIndex: 1,
data: $percent
}
]
}
4. 让地图中显示的文字居中
默认的文字显示位置的规则
全国：省份名称默认位置是在省会的位置；
这个规则是 jsonData.features[index].properties.cp 字段的经纬度，两个数值设置的
默认显示截图
解决方法
let mapJson = require("@/utils/map/json/china.json");
mapJson.features.forEach(element => {
delete element.properties.cp;
});
最后的显示效果
调整后的显示效果
5. 地图的默认大小和滚动缩放的功能设置
series: [
{
name: "测试",
type: "map",
// 默认展示的比例
zoom: 1.2,
// 是否开启平游或缩放
roam: true,
// 滚轮缩放的极限控制
scaleLimit: {
min: 1,
max: 10
},
}
]
6. 为 series.label.formatter 函数内部的内容单独设置样式
思路
使用上面官方网站提供的方法添加一个样式变量，之后在 formatter 中使用
配置源码
// 漏斗形
funnelChart: {
calculable: true,
color: ["#FFA944", "#39A0FF"],
series: [
{
name: "漏斗图",
type: "funnel",
gap: 1,
width: "40%",
left: "0",
right: "0",
top: "0",
bottom: "0",
minSize: "0%",
maxSize: "100%",
sort: "ascending",
label: {
show: true,
formatter: params => {
console.log(params);
const { name = "", data = "", money = "" } =
params.data || {};
return `${name} ${data} {gray| ${money}元}`;
},
// 这里是增加自定义样式的地方，可在 label.formatter 中使用
rich: {
gray: {
color: "gray"
}
}
},
labelLine: {
length: 20,
lineStyle: {
width: 1,
type: "solid"
}
},
data: [
{
value: "10",
data: "1000",
money: 1000,
name: "头部客户"
},
{
value: "20",
data: "3000",
money: 3000,
name: "其他客户"
}
]
}
]
},
最终演示效果
最终演示效果.png
7. 将 series[0].type = funnel 的漏斗图，强行展示成一个固定的 "金字塔" 三角形
查阅了很多资料，发现 echarts 一直都没有做 金字塔 图形的打算，由于 funnel 的本身的机制，很容易就造成生成出来的图表 "变形" 的问题，为了解决上述 "变形" 的问题，我只好取巧设置：将 value 的属性设置成 1:2 的值，注意 这个 vlue 值，最终只是为了显示起来好看，显示数据的字段并不是这个，所以需要手动增加展示数据的字段 data(这个属性可以自定义，只要在 formatter 时取对即可)
配置源码
// 漏斗形
funnelChart: {
calculable: true,
color: ["#FFA944", "#39A0FF"],
series: [
{
name: "漏斗图",
type: "funnel",
gap: 1,
width: "40%",
left: "0",
right: "0",
top: "0",
bottom: "0",
minSize: "0%",
maxSize: "100%",
sort: "ascending",
label: {
show: true,
formatter: params => {
console.log(params);
const { name = "", data = "", money = "" } =
params.data || {};
return `${name} ${data} {gray| ${money}元}`;
},
// 这里是增加自定义样式的地方，可在 label.formatter 中使用
rich: {
gray: {
color: "gray"
}
}
},
labelLine: {
length: 20,
lineStyle: {
width: 1,
type: "solid"
}
},
data: [
{
value: "10",
data: "1000",
money: 1000,
name: "头部客户"
},
{
value: "20",
data: "3000",
money: 3000,
name: "其他客户"
}
]
}
]
},
最终演示效果
最终演示效果.png
echart php mysql简书_echart 踩坑之路相关推荐
- echart php mysql简书_echarts-自定义构建
在学习自定义构建工具的时候遇到了麻烦,官网写的自定义有两种办法,跟着教程走了半天不幸的是两种方法一直报错,都未能成功.所以想把错误记录下来,请大家帮忙解决一下,百度后几种解决方法尝试无果.好在网站提供 ...
- mybatis mapper.xml dtd_全栈开发踩坑之路4-用MyBatis实现服务
1.前言 上一篇文章介绍了如何设计后端的Mysql数据库:Alex Wang:全栈开发踩坑之路3-MySql数据库设计,本文介绍如何用MyBatis实现后端服务. 本后端项目的Github地址(撰写中 ...
- jmeter 3版本到5版本踩坑之路
jmeter 3-5版本升级踩坑路 新版本下载安装 踩坑之路 新版本下载安装 下载新版本软件 ,链接: https://jmeter.apache.org/download_jmeter.cgi: 配 ...
- 微信小程序实现大转盘抽奖----踩坑之路
微信小程序实现大转盘抽奖----踩坑之路 需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘 思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...
- contentprovider踩坑之路之Failed to find provider info for com.example.app.provider和cursor=null空指针问题
目录 bug1.Failed to find provider info for com.example.app.provider bug2:cursor=null bug1.Failed to fi ...
- 2021-11-01 富文本编辑器Vue-Quill-Editor 踩坑之路
Vue-Quill-Editor 基于 Quill.适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用. 相对于ssr,spa是通过component进行工作 ssr和spa的区别 1 踩坑之路 ...
- [Java灵信LED] -- 踩坑之路
灵信led -T8 控制板卡 --踩坑之路 下载lv_led.dll 动态库链接 https://pan.baidu.com/s/11ZO-M6kllsq2AyhVW4AKoA 提取码:unsb 提取 ...
- webpack踩坑之路 (2)——图片的路径与打包
webpack踩坑之路 (2)--图片的路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我 ...
- 基于dx11的动作游戏踩坑之路--1
基于dx11的动作游戏踩坑之路--1 首先要声明所有的博客都是学习博客,不是技术博,只是用来记录.整理自己的学习路线,以及日后可以回顾一下.本人也只是一个小菜鸡,可能会有很多错误与纰漏,有大佬愿意指出 ...
最新文章
- 六类布线六大注意事项
- 收购创业公司如何评估价值
- Java那些事之Berkeley DB
- 北京全年天气状况分析
- matlab调用python函数未定义函数类_从零学习Python—调用函数def用法（下）
- netstat详解_需要！Linux常用监视和故障排查命令详解
- 内核程序实现多文件的调用
- 动态引用webservice
- Linux环境下Android开发环境的搭建
- 二 ASP.NET AutoPostBack
- [旧博客]Python 第一次
- 论文浅尝 - ACL2020 | 用于实体对齐的邻居匹配网络
- 数据分析系统DIY1/3：CentOS7+MariaDB安装纪实
- The LLVM Compiler Infrastructure | LLVM编译器基础设施
- NSX分布式防火墙是如何工作的？
- 怎么检查计算机硬盘有没有供电,终于知道电脑硬件怎样全部检测
- ppt加音乐计算机一级,PPT2016背景音乐该怎么设置?
- 表格列宽怎么设置？（excel表格）
- access open 知乎_必备技能！国际汇款SCI Open Access费用
- 感谢老师，更感谢自己