vue引入echarts-liquidfill水滴图并批量动态加载

实现需求：动态生成图表节点，生成的节点加载水滴图，水滴图根据不同的状态来显示是否有动画的效果。

1. 安装并引入echarts-liquidfill（需提前引入echarts）

npm install echarts-liquidfill  // 安装
import 'echarts-liquidfill'  // 组件引入

2. 文件代码

template:
<div class="station" v-for="(item, index) in list" :key="index">
<div :id="`chart${index}`"></div>  //根据索引动态生成id
</div>methods:
// 获取数据getData() {getList().then(res => {this.list = res.dataconst dataList = res.datathis.listLen = res.data.lengthif (this.listLen > 0) {// 节点渲染完再初始化图表，不然会报找不到节点的错误setTimeout(() => {this.initChart()}, 1000)}})},// 初始化图表initChart() {this.list.forEach((val, index) => {let t = this;const myChart = this.$echarts.init(document.getElementById(`chart${index}`))// 三条波幅需要三组数据let data = [val.SerialNumber / 100, val.SerialNumber / 100, val.SerialNumber / 100]let color = '';if (val.Color) {color = val.Color} else {color = '717F91'}myChart.setOption({grid: {top: 0,left: 0,right: 0,bottom: 0},series: [{type: 'liquidFill',shape: 'container',// shape: 'path://M155,0 C204,0 253,5.33333333 302,16 L8,16 C57,5.33333333 106,0 155,0 Z',// center: ['50%', '50%'],radius: '100%',color: [],amplitude: val.TankState == 0 ? 0 : 10, // 波幅label: {show: false},backgroundStyle: {color: 'transparent',},outline: {show: false  // 外边框},// 设置颜色渐变color: [new t.$echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: '#' + color},{offset: 0.3,color: '#' + color},{offset: 1,color: "#ffffff"}])],data: data}],})})}

vue引入echarts-liquidfill水滴图并批量动态加载相关推荐

Vue实现ECharts柱状图数据轮播（自动分页加载）
Vue实现ECharts柱状图数据轮播(自动分页加载) vue <div id="main"></div>``` js import echarts fro ...
vue引入Echarts画折线图、平滑曲线图、转化数学公式详解
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基本折线图 3 复杂折线图 3.1 多条折线 3.2 动态变化折线图 4 笛卡尔坐标系中的折线图 5 平滑曲线图 6 折 ...
ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...
Springboot+poi+实现导出导入Excle表格+Vue引入echarts数据展示
需求: 一. 数据库数据表导出Excle表格二. Excle数据导入数据库三. Vue引入Echarts数据展示工具: idea 数据库: mysql 框架:Springboot 准备工作: 1 ...
vue使用e-charts制作专题图（广西省为例）---第一篇
vue使用E-Charts制作专题图(广西省为例)---第一篇写博客是为了做笔记先给大家看一下效果图: "专题图"顾名思义就是地图的每一部分根据一定的标准,展现出不一样颜色,使 ...
Echarts使用及动态加载图表数据折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度...我想应该够简洁了使用Echarts 目前,就官网的文 ...
Echarts动态加载多条折线图
背景:动态加载多条折线图,折线图条数不确定页面效果: 页面代码 //气象数据function serchQx(beginTime, endTime, str, parameter) {$(" ...
echart自定义动画_ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
vue高德、谷歌地图动态加载
vue高德.谷歌地图动态加载前言引入地图资源页面使用完整map.js 前言因为我们这个项目,做的是国际化项目,考虑的是,在国内使用高德地图,在国外使用谷歌地图,所以在这里做了个动态引入地图, ...

vue引入echarts-liquidfill水滴图并批量动态加载

vue引入echarts-liquidfill水滴图并批量动态加载相关推荐

最新文章

热门文章