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

 

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

 

 }

 

}