echarts水晶球的使用

引入echart.js和水晶球插件echart.liquidfill.js

<script src="./js/echarts.js"></script>

<script src="./js/echarts-liquidfill.js"></script>

版本如下

 var option;var water_color = {type: 'linear',x: 0,//线性渐变颜色的起点和终点，取值范围为容器的百分比0-1，(x,y),(x2,y2)分别是起点和终点y: 0,x2: 0,y2: 1,colorStops: [{//渐变颜色的颜色取值offset: 1,color: 'rgba(58, 71, 212, 0)'}, {offset: 0.5,color: 'rgba(31, 222, 225, .2)'}, {offset: 0,color: 'rgba(31, 222, 225, 1)'}],globalCoord: false}//电量var basePower = 3840 * 2var actualPower = 3840var value = actualPower / basePower;var data = [{//数据，有关水波的设置,value: value,//value的范围：0-1，对应高度百分比name: '397', // 数据名称direction: 'right', //指定波浪的移动方向'left' 或 'right'， 'none' 表示静止。itemStyle: {color: water_color // 设置水波的颜色}}, {value: value - 0.1,direction: 'right',itemStyle: {color: water_color // 设置水波的颜色}}, {value: value - 0.15,direction: 'right',itemStyle: {color: water_color // 设置水波的颜色}},// {//     value: value-0.2,//     direction: 'right',//     itemStyle: {//         color: water_color // 设置水波的颜色//     }// }]option = {title: {text: actualPower,textStyle: {fontSize: 24,fontFamily: 'Microsoft Yahei',fontWeight: 'normal',color: '#bcb8fb',rich: {a: {fontSize: 20,}}},x: 'center',//老版本的echart的横向定位，新版用的left，y: '35%'},graphic: [{//发电量type: 'group',left: 'center',bottom: '8%',children: [{type: 'text',z: 100,left: '10',top: 'middle',style: {fill: '#aab2fa',text: '日累计发电量',font: '20px Microsoft YaHei',color: '#fff'}}]}],series: [{type: 'liquidFill',radius: '80%',center: ['50%', '50%'],//  shape: 'roundRect',data: data,backgroundStyle: {color: {//线性渐变颜色type: 'linear',x: 1,y: 0,x2: 0.5,y2: 1,colorStops: [{offset: 1,color: 'rgba(68, 145, 253, 0)'}, {offset: 0.5,color: 'rgba(68, 145, 253, .25)'}, {offset: 0,color: 'rgba(68, 145, 253, 1)'}],globalCoord: false},},outline: {//轮廓borderDistance: 0,itemStyle: {borderWidth: 10,borderColor: {//线性渐变，可以使用另一个对象type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(69, 73, 240, 0)'}, {offset: 0.5,color: 'rgba(69, 73, 240, .25)'}, {offset: 1,color: 'rgba(69, 73, 240, 1)'}],globalCoord: false},shadowBlur: 10,shadowColor: '#000',}},color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 1,color: 'rgba(58, 71, 212, 0)'}, {offset: 0.5,color: 'rgba(31, 222, 225, .2)'}, {offset: 0,color: 'rgba(31, 222, 225, 1)'}],globalCoord: false},label: {normal: {formatter: '',}}},]};

echarts水晶球的使用相关推荐

Vue项目中如何使用Echarts 及Echarts中echarts-liquidfill水晶球插件
在博主的前述的一篇文章当中,有写到如何在vue项目引入Echarts插件,Echarts插件的应用方法可参考博主之前的文章.在本文中,博主将结合实际开发过程中的操作,介绍一下如何引入echarts-l ...
echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
echarts 横纵分割线颜色透明度
/*横纵分割线颜色透明度*/ xAxis: {axisLabel: {textStyle: {color: "#2484db"}},axisLine: {lineStyle: {c ...

echarts水晶球的使用

echarts水晶球的使用相关推荐

最新文章

热门文章