水位图数据展示
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了水位图数据展示相关的知识,希望对你有一定的参考价值。
参考技术A 实现水位图,可以选择两种:1:echart和echarts-liquidfill两种文件,vue项目
2:采用 charts.ant.design 运用react项目
效果图如下
1:水位图渐变,2:百分比3:水位在动
hygrometer.setOption(
tooltip:
show: true,
formatter: function (a)
var str = "";
var dataValueNum = Number(Number(a.value) * 100).toFixed(2);
str = `满意率:$dataValueNum%`;
return str;
,
,
title:
text: "满意率",
textStyle:
color: "#fff", // 字体颜色
fontSize: 18,
fontWeight: "400",
align: "center", // 文字的水平方式
baseline: "middle",
position: "inside",
verticalAlign: "middle", // 文字的垂直方式
,
left: "center", // 定位
top: "20%",
,
series: [
type: "liquidFill",
radius: "95%",
waveAnimation: true,
data: [
value: dataValue,
direction: "left",
itemStyle:
normal:
// color: "#1890ff",
color: //配置水位颜色从上到下渐变
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
offset: 0,
color: "#06305a",
,
offset: 1,
color: "#1890ff",
,
],
global: false,
,
,
,
,
],
outline:
// show: true , //是否显示轮廓 布尔值
borderDistance: 2, // 外部轮廓与图表的距离 数字
itemStyle:
borderColor: "#1890ff", // 边框的颜色
borderWidth: 2,
,
,
itemStyle:
opacity: 0.8, // 波浪的透明度
shadowBlur: 0, // 波浪的阴影范围
,
backgroundStyle:
color: "#060715", // 图表的背景颜色
,
label:
// 数据展示样式
formatter: function (a)
var str = "";
var dataValueNum = Number(Number(a.value) * 100).toFixed(2);
str = `$dataValueNum%`;
return str;
,
show: true,
color: "#fff",
insideColor: "#fff",
fontSize: 26,
fontWeight: 400,
align: "center",
baseline: "middle",
position: "inside",
,
,
],
);
,
Echarts 环形图 默认高亮展示某个数据
项目中有个图标类的需求,环形图高亮第一条数据.要求第一条数据图块默认展示:
分析:想要获得上图效果需要一下条件
1,进入页面可以触发第1条数据的选中action
2,鼠标指向别的图块时,展示选中数据的图块信息
3,鼠标离开环形图时,展示默认第一条数据
在echarts上找寻文档得知:
action -> dispatchAction 可以手动触发action.
通过[分析]得出的条件,我们可以对相应动作做出控制.
1,进入页面可以触发第1条数据的选中action
myChart.dispatchAction({type: \'highlight\',seriesIndex: 0,dataIndex: 0});
type 触发action类型
seriesIndex series索引
dataIndex 高亮数据索引
具体可以参考echarts官方文档
注意,不可以使用 type: \'pieSelect
\',该种类型会使得选中的色块发生向外的位移,并且不会展示label内容.
2,鼠标指向别的图块时,展示选中数据的图块信息,隐藏默认色块高亮信息
myChart.on(\'mouseover\',(v) => { if($scope.initFlag && v.dataIndex != 0){ myChart.dispatchAction({ type: \'downplay\', seriesIndex: 0, dataIndex: 0 }); } });
注意:当鼠标在默认色块时,无需触发取消高亮[downplay]事件
3,鼠标离开环形图时,展示默认第一条数据
myChart.on(\'mouseout\',(v) => { if($scope.initFlag){ myChart.dispatchAction({type: \'highlight\',seriesIndex: 0,dataIndex: 0}); } });
当鼠标移除时,别忘记再次触发饼图的默认展示.
另外,如果想展示tooltip的话,用type = showTip 也是可以的.
以上是关于水位图数据展示的主要内容,如果未能解决你的问题,请参考以下文章
SPSS实战应用案例50篇-如何使用SPSS进行时间序列分析
SPSS实战应用案例50篇-如何使用SPSS进行时间序列分析
PHPWordPHPWord生成图表-雷达图 | 隐藏图例设置数值类别隐藏展示多组数据