![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE-ELEMENT-IVIEW-ECHARTS使用笔记
文章平均质量分 67
蒲公英想养花
只为愉悦送命
展开
-
Echarts柱状图柱子点击事件
文章目录效果展示需求实现效果展示需求点击柱子显示当天的详细数据实现这里只需要拿到被点击柱子对应的X轴时间坐标,可以直接监听click事件在DOM加载完为chart注册点击事件拿到被点击的柱子的X轴坐标name抛回父组件方法一:直接监听click事件实现这个效果click可以拿到柱条 color: “#1DADF1”第几个 componentIndex: 0类型 seriesType/componentSubType: “bar”data/valu原创 2021-09-07 10:59:27 · 10195 阅读 · 1 评论 -
Echarts柱状图宽度/边框设置问题
文章目录效果展示需求实现效果展示需求柱条加边框设置柱条最大最小宽度实现borderWidthborderWidth:设置边框宽度borderColor:设置边框颜色在itemStyle中设置barMaxWidthbarWidth:设置柱条宽度,可以设置number(20表示20px),也可以设置百分比,表示占这个类目的宽度比例barMaxWidth:最大柱条宽度barMinWidth:最小柱条宽度注意!!!当有多个柱条时,即series有多个对象,barWidth原创 2021-09-06 11:45:23 · 19250 阅读 · 0 评论 -
tooltip定制样式
文章目录效果展示需求实现效果展示需求保留symbol不同类不同单位日期和内容颜色分别设置背景色、外阴影实现formater中params可以打印出来看看这里有三类 所以数组有三项color:数据图形的颜色name:x轴对应数据seriesName:类目名value:类目数值maker:默认的symbol图标遍历params,处理后的返回值是你想要展示的格式tooltip: { trigger: 'axis', axisPointer: {原创 2021-08-09 16:51:14 · 348 阅读 · 0 评论 -
echarts配置集锦
文章目录基本配置参考线markLineY轴分割线隐藏区域缩放折线变曲线虚线折线图和柱状图切换饼图的label自定义富文本样式柱状图柱子渐变色Y轴分割线样式区域面积图折线图折线渐变坐标轴指示器渐变色柱条的最大最小宽度柱条重叠柱条颜色定制图例间隔折线上的标记(小圆圈)柱子圆角多个y轴图例的icon设置效果实现实现三类三个柱子效果源码使用基本配置参考线markLinemarkLineimport ‘echarts/lib/component/markLine’ series: [ {原创 2021-08-02 10:16:29 · 120 阅读 · 0 评论 -
VUE—ELEMENT—IVIEW—ECHARTS
1.根据后台数据动态生成表格的表头<el-table :data="tableData" border> <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label" > </el-table-column>原创 2021-04-24 15:25:21 · 343 阅读 · 0 评论