Taro React使用echarts 词云
组件网址
echarts-wordcloud
echarts-for-react
安装组件和配置
npm install echarts
npm install echarts-wordcloud
npm install --save echarts-for-react
引用
import ReactEcharts from 'echarts-for-react';
import * as echarts from "echarts";
import "echarts-wordcloud";
使用方法
class wordcloud extends Component {
wordOption(){
let wordData = [
{
name: "游戏",
value: 4220000
},
{
name: "美食",
value: 16681
},
{
name: "衣服",
value: 4386
},
{
name: "鞋子",
value: 222055
},
{
name: "零食",
value: 233467
},
{
name: "化妆品",
value: 66662244
},
{
name: "吃货",
value: 18298
},
{
name: "美食家",
value: 1488884
},
{
name: "程序猿",
value: 999999999
},
{
name: "肝帝",
value: 182298
},
{
name: "老师",
value: 144884
},
{
name: "宠物",
value: 15622355
}
]
let option = {
backgroundColor: "#fff",
tooltip: {
pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
},
series: [
{
type: "wordCloud",
gridSize: 1,
sizeRange: [12, 55],
rotationRange: [-45, 0, 45, 90],
textStyle: {
normal: {
color: function () {
return (
"rgb(" +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
")"
);
}
}
},
left: "center",
top: "center",
right: null,
bottom: null,
width: "90%",
height: "110%",
data: wordData
}
]
};
return option;
};
render() {
return (
<View className='word-chart'>
<ReactEcharts
option={this.wordOption()}
theme='ThemeStyle'
/>
</View>)}
}