WELCOME TO BIG DATA VISUALIZATION

新闻中心 

最新的一体化系统新闻资讯 时刻在线 持续服务
CRAFTSMANSHIP TO
CREATE A “SAID” WORKS

echarts水滴图在纯HTML开发中的基本用法

发布于 2022年09月03日

随着互联网的不断发展与更新,当表格数据基本满足客户的数据需求以后,客户就会开始追求感官上的需求,比如,将这些表格用更炫酷或更高级的方式来展示数据。

 

同一种数据,往往有多种可视化呈现的方式。然而,在我们将数据可视化的过程中,却经常会被“惯性思维”所束缚,觉得显示占比就要采用饼图,展示数据变化趋势只用折线图,除了饼图还可以有哪些图形可以展示占比?除了折线图,展示数据趋势还能用什么图形?在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

 

1

 

在head引入

 

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

 

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

 

 

步骤二:

 

创建一个装载echarts宽高的div盒子 

 

2

 

 

步骤三 :

 

用创建的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

 

                        }

 

                    }

 

                }

 

4

 

5

 

 

步骤五:

 

属性赋值

 

        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

 

 }

 

}

 

数据中心 建模
预约产品DEMO演示
填写即可获得免费服务和资料下载/工作人员基于您的需求远程 演示数字孪生解决方案

姓名



公司名称



工作邮箱



手机号



所在城市



我想要


 数据中心

 数据可视化大屏

 我搭世界

 成为合作伙伴



其他需求