Echarts 圆环图 配置难点

该函数方法如下：

 function formatNumber (num) {

     let reg = /(?=(\B)(\d{3})+$)/g

    return num.toString().replace(reg, ',')

}

样式关键在于rich 自定义配置 非常有用

legend: {

                    borderColor:'#c7d0fc',  //边框颜色

                    borderWidth:1,     //边框宽度

                    borderRadius: 5,  //边框圆角

                    padding:[15,12], //边框内边距

                    icon: "circle",  //图例样式

                    orient: 'horizontal',  //排列方式

                     itemGap: 20,  //间隔

                },

在使用echarts 折线图时，可能会遇到针对不同的数据显示不同的小圆点样式，经过查看echarts配置项，其中data中有一个value配置项选项，可以单独设置某一个数据的显示样式，具体使用方式如下：

具体显示样式如下所示：

一、后台返回一个集合Map<String,List<Map<String,Object>>> ,每个map对应一个图。

二、jsp 页面

1、首先引入 jquery 和echarts 的 js文件

2、创建 展示环形图的div

    <div id="five"></div>

3、echarts加载，用ajax访问后台获取数据

总结：

一个页面要显示多个图表（不同的）时，添加多个div，然后给每个div加载echarts图表，配置option；

一个页面要显示多个图表（相同的）时，如上，把series设置为数组，然后一个一个的添加即可。

---