- 博客(102)
- 资源 (10)
- 收藏
- 关注
RSS订阅原创 Echarts pie 饼图踩坑详细配置
Echarts | pie 饼图踩坑配置：[https://juejin.cn/post/7000547459210412040](Echarts | pie 饼图踩坑配置)Echarts 图标样式个性化设置，如饼图空白间距，图例自定义，图例显示百分比，提示框自定义，百分比和标签同时存在等等，解决折磨人的细节样式问题。环形饼图官网环形饼图示例：https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnutlegend 图例位置
2021-08-26 15:04:04
5857
1
原创 Echarts折线图超详细超细节配置
系列文章：Echart Bar 柱状图样式详解Echarts Bar 横向柱状图Echarts 图标样式个性化设置，如 x 轴间距，y 轴样式，图例自定义，提示框自定义，数据列悬浮高亮，坐标指示器背景渐变色等等，解决折磨人的细节样式问题。基础配置title 标题组件let title = { text: "累计消费趋势", // 标题 subtext: "同比上年同期，累计消费增加200元", // 副标题 top: -5, // 定位 left: -5, // 定位
2021-08-26 14:47:50
14412
1
原创 Echarts bar纵向柱状图超详细细节配置
上一篇横向柱状图：https://juejin.cn/post/6999901838384300040原文地址：https://juejin.cn/post/6999630442362044447纵向柱状图Echarts图标样式个性化设置，如x轴间距，y轴样式，图例自定义，提示框自定义，数据列悬浮高亮，坐标指示器背景渐变色等等纵向柱状图实现本质和横向是一样的，就是将 x，y 轴值更换一下；x 轴为value，y 轴为categorylet option = { xAxis: {
2021-08-26 14:34:36
5236
原创 Echarts bar 柱状图超详细实战
在最近的项目中，有可视化图表的需求，第一时间就想到了Echarts和Hightcharts。要用到的可视化图表都是比较常见的，Echarts文档和实例都比较全面，而且还是中文的，方便阅读，于是选择了Echarts。Echarts的图表样式如果是自用，肯定是没啥问题的，但是 UI 肯定是不满意的，于是进行了一系列的样式调整…安装及配置前端框架为easywebpack-vue，使用的Echarts版本为^5.0.1Echarts 官方文档: https://echarts.apache.org/zh/
2021-08-26 14:25:54
11217
原创 Echarts 堆叠图数据为0的展示
const stackBarSeries = { type: "bar", label: { show: true, // 当数据为0时不显示，不然会出现加粗0标识 formatter: function(params) { if (params.value > 0) { return params.value; } else { return ""; } }, },};```![请添加
2021-08-26 14:16:05
753
原创 Echarts 柱状图上方显示数值
完整配置可查看 Echarts Bar横向柱状图柱体的属性设置series中label可以是一个函数，在函数中处理。可以设置位置，字体颜色和大小等。核心代码为params.value[params.encode.x[0]]。let series = [ { // ...... type: "bar", label: { // 柱图头部显示值 show: true, position: "right", color: "#333"
2021-08-24 16:02:06
11348
原创 Echarts柱体设置不同颜色
完整配置可查看 Echarts Bar横向柱状图柱体的属性设置series中color可以是一个函数，在函数中处理。核心代码为colorList[params.dataIndex]let colorList = [ "#1890ff", "#52c41a", "#faad14", "#f5222d", "#1DA57A", "#d9d9d9",];let series = [ { type: "bar", barWidth: 16, itemSty
2021-08-24 16:00:10
478
原创 Echarts 宽高自适应处理
在 web 项目中做图表时，图表的宽高不是固定的，需要随着浏览器宽度高度自适应，使用的方法就是resize。如果有多个图表，需要同时进行resize处理。<script> export default { mounted() { window.addEventListener("resize", this.handleResize, false); }, destroyed() { window.removeEventListener("re
2021-08-24 11:56:26
1402
原创 Echarts 动态更新数据和样式
实现数据按月统计和按日统计的动态切换。按月统计时，每个月数据都会展示，x 轴显示 12 个标签；按日统计时，x 轴不完全显示所有标签，间隔显示，而且柱状体的宽度也会变化。主要是采用的是setOption方法。官方文档[setOption]：https://echarts.apache.org/zh/api.html#echartsInstance.setOption<script> import * as R from "ramda"; const source1 = [
2021-08-24 11:55:37
1040
原创 Echarts legend图例大小自定义
let option = { grid: { left: 0, right: 12, bottom: 0, top: 68, containLabel: true, }, // 图例设置 legend: { top: 32, left: -5, icon: "circle", // 修改形状 itemHeight: 6, // 修改icon图形大小 itemGap: 24, // 修改间距 textSty
2021-08-24 11:53:58
15522
2
原创 Echarts tooltip 提示框自定义样式
tooltip默认的样式或者值可能不符合开发的要求，可以使用formatter函数自定义处理let option = { tooltip: { // 提示框组件 trigger: "axis", // 坐标轴触发 padding: [20, 16, 12, 16], backgroundColor: "#fff", alwaysShowContent: false, formatter: function(params) { let html
2021-08-24 11:47:51
4177
1
原创 Echarts背景色渐变
主要是设置tooltip提示框组件的trigger，让 x 轴悬浮触发；然后设置xAxis的坐标指示器axisPointer，指示器遮罩样式shadowStyle可以设置渐变色let option = { tooltip: { // 提示框组件 trigger: "axis", // 坐标轴触发 }, xAxis: { // 坐标轴指示器 axisPointer: { type: "shadow", // 坐标轴指示器的 z 值，控制图形
2021-08-24 11:45:24
624
原创 Echarts series 数据列悬浮高亮
const stackBarSeries = { type: "bar", // 柱状图 barWidth: 32, // 柱体宽度 stack: "total", // 数据堆叠 showBackground: false, // 是否显示柱条背景色 // 高亮的图形样式和标签样式 emphasis: { // 鼠标hover时，同业务项高亮，其他项淡出图形 focus: "series", // 默认配置，仅当前hover数据淡出 // focus
2021-08-24 11:41:53
937
原创 Echarts X轴只显示最大值和最小值
x轴基础样式设置如下，可设置刻度和轴线相关的属性xAxis: { type: "category", boundaryGap: true, // 坐标轴两边留白策略，默认为true axisTick: { // 刻度 show: false, }, axisLabel: { // 刻度标签 color: "#808080", fontSize: 12, margin: 8, // 刻度标签与轴线之间的距离 interval: "auto", //
2021-08-24 11:38:49
4399
原创 Echarts 5.x安装及使用
安装及配置前端框架为easywebpack-vue，使用的Echarts版本为^5.0.1Echarts 官方文档: https://echarts.apache.org/zh/index.html安装 Echartsnpm install echarts --save全局引入 Echarts在 main.js 加入如下代码：import * as echarts from "echarts";Vue.prototype.$echarts = echarts;按需引入 Echarts
2021-08-24 11:30:34
2049
2
原创 CSS设置背景和渐变色
1. 添加背景色纯色背景：用background-color渐变背景：用line-gradient，也可以一次用多个div { background-color: red;}div { /* 单个渐变背景 */ background: linear-gradient(to bottom, red, green); background: linear-gradient(to bottom, red, green 20%, orange 80%, blue); /* 多个渐变
2021-08-04 11:34:26
9306
1
原创 mac zsh环境变量不生效
终端利器 iTerm2 + oh my zshiTerm2官网：https://iterm2.com/下载后是一个zip文件，加压后直接运行即可。oh-my-zsh官网：https://ohmyz.sh/oh-my-zsh主题配置：https://github.com/ohmyzsh/ohmyzsh/wiki/themes安装命令如下：$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install
2021-07-19 17:45:28
7309
1
原创 浏览器UA参数解析
var inBrowser = typeof window !== 'undefined';var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();var UA = inBrowser && window.navigator.
2021-07-08 16:27:38
975
原创 vscode 扩展宿主意外终止
应该是vscode 安装的插件有冲突，导致报错：扩展宿主意外终止。插件都不起作用了。按照网上的方式试了好多，都没啥效果。卸载git后，再重新安装，只坚持了一会，就继续报错了。最终没办法，还是彻底卸载vscode吧，重新安装插件。（1）在控制面板中卸载vscode（2）在C盘中，删除.vscode文件（存放安装的插件）。不然你就算重装了，之前的配置还保留着，可能还会有冲突。（3）删除Roaming/Code文件夹（存放用户信息和缓存信息）...
2021-07-06 10:52:00
2303
原创 antdv 2.* 中如何使用动态Icon
ant-design-vue 2.x 中Icon 组件动态渲染antdv2.*中如何使用动态Iconant design icons批量注册使用（1）新建antdvIcons.tsimport type { App } from "vue";import { createVNode } from "vue";import * as Icons from "@ant-design/icons-vue";const Icon = (props: { icon: string }) =>
2021-06-30 16:00:03
1887
原创 ant-design-vue 2.x 中Icon 组件动态渲染
ant-design-vue 2.x 中Icon 组件动态渲染antdv2.*中如何使用动态Iconimport type { App } from "vue";import * as antIcons from "@ant-design/icons-vue";export function setupAntdIcon(app: App<Element>): void { // 注册组件 Object.keys(antIcons).forEach((key) => {
2021-06-30 12:05:40
1415
原创 元素隐式具有 “any“ 类型，因为类型为 “any“ 的表达式不能用于索引类型 “typeof import(“@ant-design/icons-vue/lib/index“)“
问题代码：import type { App } from "vue";import * as antIcons from "@ant-design/icons-vue";export function setupAntdIcon(app: App<Element>): void { // 注册组件 Object.keys(antIcons).forEach((key) => { app.component(key, antIcons[key]); });}
2021-06-30 11:53:58
5061
1
原创 `inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.
问题描述：Warning: [ant-design-vue: Menu] inlineCollapsed not control Menu under Sider. Should set collapsed on Sider instead.翻译：inlineCollapsed 不能控制 Sider 下的 Menu。应该在 Sider 上设置 collapsed原因分析：menu放在sider中时，展开收缩控制应由sider处理。menu自己处理无效。// 错误写法<a-layout-side
2021-06-29 18:37:48
5704
1
原创 vscode git bash终端配置：terminal.integrated.profiles.windows
旧版VScode 的 git bash 终端配置如下："terminal.integrated.shell.windows": "D:\\Program Files\\Git\\bin\\bash.exe"当VSCode升级至1.57.1(2021.6.17)时，会出现警告提示：此项已弃用，配置默认 shell 的新推荐方法是在 #terminal.integrated.profiles.windows# 中创建一个终端配置文件，并将其配置文件名称设置为 #terminal.integrated.d
2021-06-24 16:33:47
15452
10
原创 v-html 样式无效，图片不显示
代码模拟：<template> <article> <div>content1：接口返回</div> <div class="content" v-html="content1"></div> <div>content2：前端代码</div> <div class="content" v-html="content2"></div> </ar
2021-06-16 12:02:18
3697
原创 找不到模块“path”或其相应的类型声明
采用vite + typescript开发，配置别名时会报错：找不到模块“path”或其相应的类型声明 或者 找不到名称“__dirname”等解决办法：npm install @types/node --save-dev
2021-06-11 15:25:58
3740
原创 Cannot find module ‘xxx‘ or its corresponding type declarations.Vetur(2307)
问题描述：Cannot find module ‘store/index’ or its corresponding type declarations.Vetur(2307)原因分析：以当前项目的上级目录为根目录， Vetur 不知道当前哪一层文件夹才是真正的根目录。网上有好多帖子说，在 tsconfig.json 中配置 baseUrl 和 paths，我也配置了，但是没有用。这个问题本质上是插件本身的问题。{ "compilerOptions": { "baseUrl": "./",
2021-06-11 15:17:21
23728
原创 解决PowerDesigner提示This data item is already used in a primary identifier
在使用PowerDesigner绘制概念数据模型（CDM）时，会遇到如下问题：解决方法如下：菜单栏Tools->Models Options->Model Settings->Data Item->取消Unique Code前面的√
2017-03-07 16:39:23
15072
3
原创 已经装了MySQL-python，但仍报错: No module named MySQLdb
可能是版本问题，或者装了两个版本解决方法：1.在官网下载MySQL-python-1.2.5。https://pypi.python.org/pypi/MySQL-python2.unzip MySQL-python-1.2.5.zip3,安装cd MySQL-python-1.2.5 python setup.py buildpython setup.py in
2016-10-17 11:32:07
5864
原创 MySQL server has gone away 问题的解决方法
mysql出现ERROR : (2006, 'MySQL server has gone away') 的问题意思就是指client和MySQL server之间的链接断开了。造成这样的原因一般是sql操作的时间过长，或者是传送的数据太大。mysql> show global variables like 'max_allowed_packet';+----------------
2016-10-17 11:20:55
2278
原创 Vue.js搭建路由报错 router.map is not a function
错误：解决办法：2.0已经没有map了，使用npm install [email protected] 命令兼容1.0版本vue再引入文件
2016-10-14 10:42:44
14851
1
原创 vue.js入门实例
（1）页面模板 vue.js--快速入门Demo Vue demo ....... new Vue({ el:'#app', data:'' })
2016-10-11 15:03:33
7627
2
原创 父子组件通信vue.js
子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children，包含它所有的子元素。简单实例展示： Dispatch Event Messages: {{ messages | json }} // 注册子组件// 将当前消息派发出去Vue.component
2016-10-09 15:03:06
1021
原创 组件使用component
（1）组件注册// 定义var MyComponent = Vue.extend({ template: 'A custom component!'})// 注册Vue.component('my-component', MyComponent)// 创建根实例new Vue({ el: '#example'})（2）组件使用 组件渲染为：
2016-10-09 12:26:19
696
原创 select动态绑定vue.js
动态选项，用 v-for 渲染： {{ option.text }} Selected: {{ selected }}new Vue({ el: '#demo', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two',
2016-10-09 09:43:35
40215
原创 表单控件绑定vue.js
可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。（1）Text：单行文本Message is: {{ message }}（2）Multiline text：多行文本Multiline message is:{{ message }}（3）radio：单选框OneTwoPicked
2016-10-09 09:39:54
1315
2
原创 按键修饰符vue.js
在监听键盘事件时，我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符：记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名：全部的按键别名：entertabdeleteescspaceupdownleftright可以自定义按键别名：// 可以使用 @keyup.f1Vue.directiv
2016-10-08 16:26:08
2265
原创 事件修饰符vue.js
在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。为了解决这个问题，Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop。......
2016-10-08 16:21:36
5505
原创 Class 与 Style 绑定内联样式(vue.js)
v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：data: { styleObject: { color: 'red', fontSize: '13px' }}
2016-10-08 15:55:59
2691
EasyX图形库
2017-02-26
OpenGL图形API
2017-02-26
编译原理课后答案
2016-08-08
jedate.zip
2016-08-08
jqgrid.zip
2016-08-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人