前言
本文主要汇总一些Echarts自身不包含的组件。
水球图
对于Echarts4.9及以下是内置水球图的，但是5.x以上版本是没有的。
https://github.com/ecomfe/echarts-liquidfill
安装
代码语言：javascript复制npm install echarts
npm install echarts-liquidfill@3注意:
echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本
使用
代码语言：javascript复制import * as echarts from "echarts";
import "echarts-liquidfill";简单示例
代码语言：javascript复制var option = {
series: [{
type: 'liquidFill',
data: [0.6]
}]
};标签图
安装
代码语言：javascript复制npm install echarts-wordcloud --save引用
代码语言：javascript复制import * as echarts from "echarts";
import "echarts-wordcloud";使用
代码语言：javascript复制var myChart = echarts.init(document.getElementById('boxECD1'));
var keywords =[
{"name":"张三","value":100},
{"name":"李四","value":80},
{"name":"王五","value":100},
{"name":"赵六","value":100},
{"name":"田七","value":100}
]
var option = {
series: [{
type: 'wordCloud',
// sizeRange: 词的大小，最小12px，最大60px，可以在这个范围调整词的大小
sizeRange: [20, 40],
rotationRange: [0, 0],
//rotationStep: 每个词旋转的角度范围和旋转的步进
rotationStep: 45,
//gridSize:词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字，这里可以用函数根据词云的数量动态返回间距
gridSize:15,
// shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
shape: 'pentagon',
width: '100%',
height: '100%',
textStyle: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
// 颜色可以用一个函数来返回字符串，这里是随机色
color: function () {
return 'rgb(' [
Math.round(Math.random() * 220),
Math.round(Math.random() * 220),
Math.round(Math.random() * 220)
].join(',') ')';
}
},
emphasis: {
focus: 'self',
textStyle: {
textShadowColor: '#333'
}
},
data:keywords
}]
};
myChart.setOption(option);
