- 博客(102)
- 资源 (10)
- 收藏
- 关注
原创 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
6144
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
15657
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
5493
原创 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
13033
原创 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
842
原创 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
11546
原创 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
500
原创 Echarts 宽高自适应处理
在 web 项目中做图表时,图表的宽高不是固定的,需要随着浏览器宽度高度自适应,使用的方法就是resize。如果有多个图表,需要同时进行resize处理。<script> export default { mounted() { window.addEventListener("resize", this.handleResize, false); }, destroyed() { window.removeEventListener("re
2021-08-24 11:56:26
1472
原创 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
1089
原创 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
17029
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
4645
1
原创 Echarts背景色渐变
主要是设置tooltip提示框组件的trigger,让 x 轴悬浮触发;然后设置xAxis的坐标指示器axisPointer,指示器遮罩样式shadowStyle可以设置渐变色let option = { tooltip: { // 提示框组件 trigger: "axis", // 坐标轴触发 }, xAxis: { // 坐标轴指示器 axisPointer: { type: "shadow", // 坐标轴指示器的 z 值,控制图形
2021-08-24 11:45:24
705
原创 Echarts series 数据列悬浮高亮
const stackBarSeries = { type: "bar", // 柱状图 barWidth: 32, // 柱体宽度 stack: "total", // 数据堆叠 showBackground: false, // 是否显示柱条背景色 // 高亮的图形样式和标签样式 emphasis: { // 鼠标hover时,同业务项高亮,其他项淡出图形 focus: "series", // 默认配置,仅当前hover数据淡出 // focus
2021-08-24 11:41:53
1012
原创 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
4717
原创 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
2217
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
9739
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
8158
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
1030
原创 vscode 扩展宿主意外终止
应该是vscode 安装的插件有冲突,导致报错:扩展宿主意外终止。插件都不起作用了。按照网上的方式试了好多,都没啥效果。卸载git后,再重新安装,只坚持了一会,就继续报错了。最终没办法,还是彻底卸载vscode吧,重新安装插件。(1)在控制面板中卸载vscode(2)在C盘中,删除.vscode文件(存放安装的插件)。不然你就算重装了,之前的配置还保留着,可能还会有冲突。(3)删除Roaming/Code文件夹(存放用户信息和缓存信息)...
2021-07-06 10:52:00
2404
原创 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
1948
原创 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
1460
原创 元素隐式具有 “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
5262
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
5989
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
15733
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
4028
原创 找不到模块“path”或其相应的类型声明
采用vite + typescript开发,配置别名时会报错:找不到模块“path”或其相应的类型声明 或者 找不到名称“__dirname”等解决办法:npm install @types/node --save-dev
2021-06-11 15:25:58
3910
原创 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
23875
原创 解决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
15487
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
5881
原创 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
2291
原创 Vue.js搭建路由报错 router.map is not a function
错误:解决办法:2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue再引入文件
2016-10-14 10:42:44
14875
1
原创 vue.js入门实例
(1)页面模板 vue.js--快速入门Demo Vue demo ....... new Vue({ el:'#app', data:'' })
2016-10-11 15:03:33
7662
2
原创 父子组件通信vue.js
子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children,包含它所有的子元素。简单实例展示: Dispatch Event Messages: {{ messages | json }} // 注册子组件// 将当前消息派发出去Vue.component
2016-10-09 15:03:06
1025
原创 组件使用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
703
原创 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
40272
原创 表单控件绑定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
1328
2
原创 按键修饰符vue.js
在监听键盘事件时,我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符:记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:全部的按键别名:entertabdeleteescspaceupdownleftright可以自定义按键别名:// 可以使用 @keyup.f1Vue.directiv
2016-10-08 16:26:08
2273
原创 事件修饰符vue.js
在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。为了解决这个问题,Vue.js 为 v-on 提供两个 事件修饰符:.prevent 与 .stop。......
2016-10-08 16:21:36
5514
原创 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
2707
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关注的人