![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Echarts
文章平均质量分 56
echarts学习记录
一只程序猿小白
前端,努力成为全栈攻城狮
展开
-
Vue + Element + html2canvas + jspdf 实现导出表单、Echarts图表为pdf
1、首先搭建Vue 项目(具体可参考以前文章,不再详述)2、引入Element(你可以引入整个 Element,或是根据需要仅引入部分组件,不再详述)3、安装并引入echarts// 安装npm install echarts -S// 在main.js中 引入import * as echarts from 'echarts'Vue.prototype.$echarts = echarts4、安装 html2canvas 、 jspdf5、新建pdf.js// 导出页面为PDF格原创 2021-11-19 14:07:14 · 1340 阅读 · 0 评论 -
前端开发常用技巧(update...)
前端开发常用技巧1、文本溢出处理2、使用伪类 添加下划线3、使用伪类 添加下划线 下划线居中ECharts 柱状图 设置立体圆柱型ECharts 柱状图柱体颜色渐变(每个柱体不同渐变色)ECharts x轴数据过多时,添加横向滚动CSS画梯形1、文本溢出处理//单行.single { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}//多行.more { display: -webkit-box !i原创 2020-12-28 16:47:37 · 1075 阅读 · 0 评论 -
Echarts 实现环状半圆形饼图
*可以用整个圆,也可以用半圆,自由发挥即可。有问题可留言1、效果如下2、代码实现// 环状半圆形饼图var option = { grid: { left: "3%", right: "3%", bottom: "3%", containLabel: true }, series: [ { name: "一般",原创 2020-09-04 16:45:08 · 7441 阅读 · 0 评论 -
Echarts 地图不显示的问题
1、项目中引入echarts,发现地图显示不出来,一直以为是安装出了问题,重新下了好几遍。2、解决方法:// 在main.js中import echarts from 'echarts' //下边这两行尤为重要,数据才能正常渲染import china from 'echarts/map/json/china.json'echarts.registerMap('china', china)3、地图成功显示...原创 2020-06-08 19:28:06 · 16455 阅读 · 2 评论 -
Echarts 水球图设置基准线
*前言:最近的项目需求中,要求在水球图中加一条标准线(作为报警提示线)。1、效果如下:2、思路:注意:如果是直接在水球图上画标线 是实现画不了的。所以我们换种思路(大佬指点了一下),在折线图上加,然后隐藏x,y轴。3、代码如下:const data = [0.68, 0.30]option = { // x轴 xAxis: { ...原创 2020-05-08 13:57:00 · 2097 阅读 · 0 评论 -
Echerts (第三篇 gauge 仪表盘的使用)
1、官网实例介绍:https://www.echartsjs.com/examples/zh/editor.html?c=gauge2、option = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, series: [ { ...原创 2019-11-05 10:55:19 · 1593 阅读 · 0 评论 -
Echarts (第二篇 图表自适应浏览器窗口缩放 字体自适应浏览器)
1、在最近的pc项目中,页面中用到了多个echerts图表,需要自适应浏览器窗口。 原因:因为图表不会根据浏览器的窗口大小而进行适应性的调整大小。 解决方案:在setOption 后引入下边window.addventListener...即可。 drawLine(month, value, index) { var a = document....原创 2019-08-29 18:33:40 · 2576 阅读 · 0 评论 -
Echarts 设置柱状图颜色渐变以及柱状图粗细(补充:其他样式,比如横向柱状图,折线区域颜色渐变,x,y轴文字颜色,轴颜色,分割线颜色等)
1、横向柱状图 series: [{ type: 'bar', barCategoryGap:'88%', barWidth:13, itemStyle: { normal: { color: new echarts.graphic.L...原创 2019-07-23 11:16:42 · 5701 阅读 · 5 评论