数据可视化
文章平均质量分 56
一只菜鸟的随笔
会隐身的小圆子
记录一些日常,如有错误,欢迎批评指正!
展开
-
vue中使用柱状图
主要是为了记录以下内容1.更改柱子宽度:barWidth属性2.设置柱子颜色为渐变色:itemStyle属性3.x轴的样式:axisLine属性4.刻度上字体的样式及间距等:axisLabel里的lineStyle属性5.去掉与x轴平行的分割线:splitLine的show属性6.去掉y轴刻度线效果图如下代码如下:<template> <div class="psgBarChart" ref="psgBarChart"></div></te原创 2022-04-24 19:14:53 · 6397 阅读 · 0 评论 -
vue中如何使用echarts——以折线图为例
1.先准备一个容器2.在mounted钩子函数中书写以下代码let psgTimeOption = { title: { left: 'center', text: '旅客时间分布', textStyle: { color: '#fff', fontSize: 35, fontWeight: 'normal' } }, // 设置折线图的位置原创 2022-04-07 19:00:08 · 11611 阅读 · 0 评论 -
vue中使用echarts饼图——修改点击时出现的文本样式
先展示效果图主要代码在emphasis的label标签里圆环中间出现的文本内容写在 label 的 formatter ;定义的样式写在 label 的 rich,其中aa,bb,cc都是自己随便起的样式名,|右侧是对应的文本,\n是换行;{d}是每个部分对应的百分比,{b}是数据名,也就是 data 里name的值,bb是给后面%设置样式的;下图来自echarts官网的配置项手册代码如下<template> <div ref="pieCon" style="原创 2022-04-01 19:26:58 · 2780 阅读 · 1 评论 -
vue中引入并使用高德地图
一、使用npm引入高德地图1.进入高德开放平台2.点击: 开发支持---------地图JS AP---------JSAPI的加载3.选择 按NPM方式使用loader4.定义一个有宽高的div二、小试牛刀----修改鼠标样式1.点击示例中心---------地图的创建---------地图属性-------设置鼠标样式右侧有示例代码下图是自己写的代码,需要注意几点(1)官方代码绑定的click事件传递的this 指当前点击元素,但是vue是没有的,在这里可以不传参,也原创 2022-04-06 11:35:08 · 19942 阅读 · 2 评论