新闻中心
CREATE A “SAID” WORKS
echarts水滴图在纯HTML开发中的基本用法
随着互联网的不断发展与更新,当表格数据基本满足客户的数据需求以后,客户就会开始追求感官上的需求,比如,将这些表格用更炫酷或更高级的方式来展示数据。
同一种数据,往往有多种可视化呈现的方式。然而,在我们将数据可视化的过程中,却经常会被“惯性思维”所束缚,觉得显示占比就要采用饼图,展示数据变化趋势只用折线图,除了饼图还可以有哪些图形可以展示占比?除了折线图,展示数据趋势还能用什么图形?在echarts3.0版本以后推出了一个新的数据变化趋势展示图”水滴图”。这里我们介绍的是水滴图在纯HTML开发中的用法。
步骤一:
使用地址引入
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
或者下载所需js然后再引入
<script src="./js/echart/echarts.js"></script>
echarts.min.js的下载需要到echart官网--->下载---->在线定制--->选择需要的图表和组件等进行下载
水滴图的js 需要到github上面去下载
<script src="./js/echart/echarts-liquidfill.min.js"></script>
https://github.com/ecomfe/echarts-liquidfill/tree/master/dist
在head引入
<script src="./js/echart/echarts.js"></script>
<script src="./js/echart/echarts-liquidfill.min.js"></script>
步骤二:
创建一个装载echarts宽高的div盒子
步骤三 :
用创建的dom容器,利用echarts提供的init方法构建一个echarts的初始化对象。
步骤四:
配置项,通过echarts的配置属性项setOptions方法为echarts设置展示样式和数据。
1. backgroundColor:用于设置整体echarts图的背景颜色
2. grid:用于设置echarts图表在容器中的位置,类似于css央视中的padding效果,控制图表内边距的效果
3. xAxis、yAxis作用参考柱状图效果
4. series:用于设置图表数据和显示样式,主要介绍水滴图的配置
{
type: 'liquidFill',//设定图表类型为水滴图
radius: '25%',//用于设定水滴图的大小,一般为圆形
center: ['10%', '55%'],//设置相对页面的x,y位置
data: [0.4], // data个数代表波浪数
color: ['#5470c6'],//控制水的颜色
outline: { // 轮廓设置
show: true,//控制是否显示轮廓
borderDistance: 8, // 边框与球中间间距
itemStyle: {
borderWidth: 5,
borderColor: '#5470c6',
shadowBlur: 10,
shadowColor: '#fff'
}
},
backgroundStyle: {
shadowColor: 'rgba(0, 0, 0, 0)',
opacity: 0,
},
label: {
textStyle: {
color: '#fff',
fontSize: 28
}
}
}
步骤五:
属性赋值
echarts.setOption(option);
如果没有效果,可能是以下问题
1. echarts的版本问题,不同的echarts版本支持的API不同,可以上官方查看所使用的API哪个版本才支持
2. 没报错,效果不出来。应该是语法问题,
如设置渐变色不起反应,可尝试以下几种写法
第一种:
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8bd46e'
}, {
offset: 1,
color: '#09bcb7'
}])
}
第二种:
normal: {
color: function (params) {
return {
colorStops: [{
offset: 0,
color: '#8bd46e'
}, {
offset: 1,
color: '#09bcb7'
}]
}
}
}
第三种参考官网对背景颜色的设置
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(2,189,255,0.2)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(159,247,255,0.1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
相关新闻
- 麦景数据中心可视化管理平台版本迭代记...
- 推动“数字孪生”城市建设|《广州市数...
- 微模块进化到3D可视化,有什么改变?...
- echarts水滴图在纯HTML开发...
- 快速制作机房3D效果图教程
- 使用我搭世界SDK创建属于你的一个3...
- 浅谈数据中心三维可视化产品功能解析
- Echarts柱状图在JavaScr...
- 如何制作无缝贴图
- 智慧楼宇三维可视化管理平台
- 机房三维建模常用技巧——怎么设置模型...
- 智慧档案库房可视化管理平台
- 初学者如何做一个机房设备模型
- 数字孪生产业技术白皮书(2022版)...
- 焕然一新、新版我搭世界如期上线
- 技术|如何使用BlenderGIS获...
- 如何帮助零基础的客户快速搭建三维场景
- 如何快速上手数据可视化设计
- 使用我搭世界SDK创建3D应用之相机...
- 智慧校园数字孪生平台
- 使用SDK(MJGL.JS)实现温度...
- 使用SDK(MJGL.JS)对3D场...
- 如何使用编辑器搭建配电、制冷拓扑图