Echarts进阶
Echarts进阶之路
BMG-Princess
愿每个人心里的炽热,在妥协后还没有死去。
展开
-
Echarts升级7:环状图+标题设置+legend属性
【代码】Echarts升级7:环状图+标题设置+legend属性。原创 2023-08-18 10:41:49 · 984 阅读 · 0 评论 -
【Echarts Gallery】简单使用
1、引入echarts.js2、打开官网Echarts Gallery3、选择echarts gallery中模板,只要复制echarts gallery上的代码插入到其中的位置4、资源免费链接流量监测及环形图概览图汇总.7z原创 2021-02-23 16:56:38 · 6058 阅读 · 0 评论 -
Echarts升级6:提示框自定义样式 + 折线图定义折线色值 + 柱状图色值
目录配图:配代码:折线色值柱状图色值配图:配代码:tooltip下加入:backgroundColor: 'rgba(248,252,253,0.8)', //通过设置rgba调节背景颜色与透明度extraCssText: 'box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.35)',color: '#353638',borderColor: '#77bef7',textStyle: { color: '#3536...原创 2021-02-05 16:04:32 · 231 阅读 · 0 评论 -
Echarts升级5:x轴、y轴线及文字上色
目录效果:配置 :y轴x轴:效果:配置 :y轴yAxis: { name: "限值", type: 'value', //y轴上方单位的颜色 nameTextStyle: { color: '#77bef7' }, type: 'value', //y轴数值颜色 .原创 2021-02-05 15:45:12 · 417 阅读 · 0 评论 -
【v-charts】折线图
template: <ve-line :data="chartData" :settings="chartSettings1" :extend="chartExtend" width="500px" height="550px"> </ve-line> data: //折线图数据 chartSettings1 = { labelMap: { dataTime: '日期',原创 2021-01-28 16:19:25 · 1540 阅读 · 2 评论 -
Echarts升级4:点击不同的折现出现不同弹框
需求:具体:<div id="smokeEcharts" style="position:absolute;width: 97%;height:65vh;margin-top:2vh"></div>数据(都是数组,相对应)this.xAxis //x轴this.lineValue1 //折线1this.lineValue2 //折线2this.lineValue3 //折线3this.threshold //阈值this.diffPercent.原创 2021-01-28 15:40:14 · 464 阅读 · 0 评论 -
多种图表使用概述:echarts、v-charts、antv、d3,持续更新中。。。
echarts官网:https://echarts.apache.org/examples/zh/index.htmlCDN引入:<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>通过 npm 获取 echarts:npm install echarts --save使用详见本博主博客:文章v-charts官网:https://v-charts..原创 2021-01-28 15:18:12 · 1201 阅读 · 0 评论 -
Echarts升级3:清除图表
前提:在重复构建图表时会有缓存问题,此时我们需要清除一下以前构建的图标再重新建立。清除图表代码:data() { return { myChart: null };}this.myChart.dispose()注意:要先判断是不是曾构建过图表,如果没有构建过,就不要用这行代码,否则会报错!...原创 2020-09-03 09:42:23 · 1964 阅读 · 0 评论 -
Echarts升级2:柱状图头部显示百分比、同时内容在弹框显示
话不多说,上代码,详解见下面//折线图初始化 setEchart() { var echarts = require('echarts/lib/echarts'); require('echarts/lib/chart/bar'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/legend'); requi原创 2020-06-03 10:36:21 · 1024 阅读 · 2 评论 -
Echarts升级1:各个参数详解
Echarts各个参数详解原创 2020-05-26 14:10:21 · 1028 阅读 · 0 评论