<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="width:80%;height: 500px;border: 1px solid black"></div>
</body>
<script type="text/javascript">
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
//按需加载 (例如:使用柱状图就加载bar模块)
//'echarts/chart/line', //折线(面积)图
//'echarts/chart/bar', //柱状(条形)图
//'echarts/chart/scatter', //散点(气泡)图
//'echarts/chart/k', //K线图
//'echarts/chart/pie', //饼(圆环)图
//'echarts/chart/radar', //雷达(面积)图
//'echarts/chart/chord', //和弦图
//'echarts/chart/force', //力导向布局图
//'echarts/chart/map', //地图
//'echarts/chart/gauge', //仪表盘
//'echarts/chart/funnel', //漏斗图
//'echarts/chart/eventRiver', //事件河流图
//'echarts/chart/venn', //韦恩图
//'echarts/chart/treemap', //矩形树图
//'echarts/chart/tree', //树图
'echarts/chart/wordCloud', //字符云
//'echarts/chart/mix', //混搭
//'echarts/chart/component', //组件
//'echarts/chart/other', //其他
//'echarts/chart/theme', //主题
//'echarts/chart/topic', //专题
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
function createRandomItemStyle() {
return {
normal: {
color: 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')'
}
};
}
option = {
title: {
text: 'Google Trends',
link: 'http://www.google.com/trends/hottrends'
},
tooltip: {
show: true
},
series: [{
name: 'Google Trends',
type: 'wordCloud',
size: ['80%', '80%'],
textRotation : [0, 45, 90, -45],
textPadding: 0,
autoSize: {
enable: true,
minSize: 14
},
data: [
{
name: "Sam S Club",
value: 10000,
itemStyle: {
normal: {
color: 'black'
}
}
},
{
name: "Macys",
value: 6181,
itemStyle: createRandomItemStyle()
},
{
name: "Amy Schumer",
value: 4386,
itemStyle: createRandomItemStyle()
},
{
name: "Jurassic World",
value: 4055,
itemStyle: createRandomItemStyle()
},
{
name: "Charter Communications",
value: 2467,
itemStyle: createRandomItemStyle()
},
{
name: "Chick Fil A",
value: 2244,
itemStyle: createRandomItemStyle()
},
{
name: "Planet Fitness",
value: 1898,
itemStyle: createRandomItemStyle()
},
{
name: "Pitch Perfect",
value: 1484,
itemStyle: createRandomItemStyle()
},
{
name: "Express",
value: 1112,
itemStyle: createRandomItemStyle()
},
{
name: "Home",
value: 965,
itemStyle: createRandomItemStyle()
},
{
name: "Johnny Depp",
value: 847,
itemStyle: createRandomItemStyle()
},
{
name: "Lena Dunham",
value: 582,
itemStyle: createRandomItemStyle()
},
{
name: "Lewis Hamilton",
value: 555,
itemStyle: createRandomItemStyle()
},
{
name: "KXAN",
value: 550,
itemStyle: createRandomItemStyle()
},
{
name: "Mary Ellen Mark",
value: 462,
itemStyle: createRandomItemStyle()
},
{
name: "Farrah Abraham",
value: 366,
itemStyle: createRandomItemStyle()
},
{
name: "Rita Ora",
value: 360,
itemStyle: createRandomItemStyle()
},
{
name: "Serena Williams",
value: 282,
itemStyle: createRandomItemStyle()
},
{
name: "NCAA baseball tournament",
value: 273,
itemStyle: createRandomItemStyle()
},
{
name: "Point Break",
value: 265,
itemStyle: createRandomItemStyle()
}
]
}]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</html>
Echarts字符云
最新推荐文章于 2024-07-24 14:12:36 发布