目录
用echarts实现了中国地图上的发票流入流出图和小鸟形状的词云图。
先看下效果
中国地图（有动态的流入流出箭头和悬浮框提示信息）：
词云图（小鸟形状，也可自行改为其他形状）：
这段时间用echarts作了不少图，之所以挑这两个图来讲，是因为他们都引入了其他js文件，这俩js文件还不太好找到。
1.中国地图
我就直接上代码了，进行一些说明：
1.首先是要引入echarts.js和china.js，文章最后会给出；
2.chinaGeoCoordMap用于装各省会的座标数据，挺重要的；
3.chinaDatas装各省的名字数据嘛；
4.convertData这个方法控制箭头流向，我设置的是一半流入中心点，一半从中心点流出（用不到的可以删掉，要用的自己改进）；
5.series里设置被攻击点（中心点），和一些特效，代码中有注释的；
6.option中设置一些整体效果，tooltip中负责悬浮框内容和格式的设置，此中有疑问可以去查看echarts官方的文档说明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
<script src="china.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var chinaGeoCoordMap = {
'黑龙江': [127.9688, 45.368],
'内蒙古': [110.3467, 41.4899],
"吉林": [125.8154, 44.2584],
'北京市': [116.4551, 40.2539],
"辽宁": [123.1238, 42.1216],
"河北": [114.4995, 38.1006],
"天津": [117.4219, 39.4189],
"山西": [112.3352, 37.9413],
"陕西": [109.1162, 34.2004],
"甘肃": [103.5901, 36.3043],
"宁夏": [106.3586, 38.1775],
"青海": [101.4038, 36.8207],
"新疆": [87.9236, 43.5883],
"西藏": [91.11, 29.97],
"四川": [103.9526, 30.7617],
"重庆": [108.384366, 30.439702],
"山东": [117.1582, 36.8701],
"河南": [113.4668, 34.6234],
"江苏": [118.8062, 31.9208],
"安徽": [117.29, 32.0581],
"湖北": [114.3896, 30.6628],
"浙江": [119.5313, 29.8773],
"福建": [119.4543, 25.9222],
"江西": [116.0046, 28.6633],
"湖南": [113.0823, 28.2568],
"贵州": [106.6992, 26.7682],
"云南": [102.9199, 25.4663],
"广东": [113.12244, 23.009505],
"广西": [108.479, 23.1152],
"海南": [110.3893, 19.8516],
'上海': [121.4648, 31.2891]
};
var chinaDatas = [
[{
name: '黑龙江',
value: 0
}], [{
name: '内蒙古',
value: 0
}], [{
name: '吉林',
value: 0
}], [{
name: '辽宁',
value: 0
}], [{
name: '河北',
value: 0
}], [{
name: '天津',
value: 0
}], [{
name: '山西',
value: 0
}], [{
name: '陕西',
value: 0
}], [{
name: '甘肃',
value: 0
}], [{
name: '宁夏',
value: 0
}], [{
name: '青海',
value: 0
}], [{
name: '新疆',
value: 0
}],[{
name: '西藏',
value: 0
}], [{
name: '四川',
value: 0
}], [{
name: '重庆',
value: 0
}], [{
name: '山东',
value: 0
}], [{
name: '江苏',
value: 0
}], [{
name: '安徽',
value: 0
}], [{
name: '湖北',
value: 0
}], [{
name: '浙江',
value: 0
}], [{
name: '福建',
value: 0
}], [{
name: '江西',
value: 0
}], [{
name: '湖南',
value: 0
}], [{
name: '贵州',
value: 0
}],[{
name: '广西',
value: 0
}], [{
name: '海南',
value: 0
}], [{
name: '上海',
value: 0
}], [{
name: '北京市',
value: 0
}]
];
var convertData = function(data) {
var res = [];
for(var i = 0; i < (data.length/2); i++) {
var dataItem = data[i];
var fromCoord = [113.4668, 34.6234];
var toCoord = chinaGeoCoordMap[dataItem[0].name];
if(fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
for(var i = (data.length/2); i < data.length; i++) {
var dataItem = data[i];
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
var toCoord = [113.4668, 34.6234];
if(fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
var series = [];
[['河南', chinaDatas]].forEach(function(item, i) {
console.log(item)
series.push({
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3 //尾迹线条曲直度
}
},
data: convertData(item[1])
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function(params){//圆环显示文字
return params.data.name;
},
fontSize: 13
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5+ val[2] * 5; //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f00'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
};
}),
},
//被攻击点
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4
},
label: {
normal: {
show: true,
position: 'right',
//offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: "#0f0"
}
},
emphasis: {
show: true,
color: "#f60"
}
},
symbol: 'pin',
symbolSize: 50,
data: [{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
}],
}
);
});
option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function(params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = "";
var name = params.name;
var value = params.value[params.seriesIndex + 1];
res = "<span style='color:#fff;'>" + name + "</span><br/>发票流入：<br/>份数：24,534 份<br/>金额：34,534.53 元<br/>税额：134,534.75 元<br/>发票流出：<br/>份数：34,585 份<br/>金额：23,478.75 元<br/>税额：15,337.54 元";
return res;
}
},
backgroundColor:"#141845",
visualMap: { //图例值控制
min: 0,
max: 1,
calculable: true,
show: true,
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: true, //是否允许缩放
itemStyle: {
normal: {
color: 'rgba(51, 69, 89, .5)', //地图背景色
borderColor: '#516a89', //省市边界线00fcff 516a89
borderWidth: 1
},
emphasis: {
color: 'rgba(37, 43, 61, .5)' //悬浮背景
}
}
},
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2.词云图
上代码，并进行说明：
1.首先，引入echarts.js和echarts-wordcloud.min.js，文章最后会给出；
2.data装词汇数据，value越大字体越大，为了效果好看，词汇较多，看代码时直接往下拉就行；
3.data中的image： 小鸟图片；
自定义图片一般有三种格式：
可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURL。
1.URL 为图片链接，例如：
'image://http://xxx.xxx.xxx/a/b.png'
注：也可以是本地图片
2.URL 为 dataURL， 例如：
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
我们就用的这种
3.可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如：
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
4.maskImage用于设置词云图形状为自定义图片的形状；
5.shape则用于设置词云图形状为默认的几种形状，由于现在echarts官网没有词云图的相关文档，我去翻看了echarts-wordcloud.min.js，发现可以设置为以下几种默认形状：
circle，cardioid（心形），diamond，square，triangle-forward，triangle，triangle-upright，pentagon（五角形），star，random-dark，random-light；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
<script src="echarts-wordcloud.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data = {
value: [
{
name: " 没有",
value: 30,
},
{
name: " 屏幕",
value: 24
},
{
name: " 不错",
value: 21
},
{
name: " 可以",
value: 19
},
{
name: " 发货",
value: 18
},
{
name: " 这个",
value: 18
},
{
name: " 什么",
value: 17
},
{
name: " 一个",
value: 12
},
{
name: " 不好",
value: 12
},
{
name: " 质量",
value: 11
},
{
name: " 快递",
value: 11
},
{
name: " 问题",
value: 10
},
{
name: " 物流",
value: 9
},
{
name: " 几天",
value: 9
},
{
name: " 一般",
value: 9
},
{
name: " 就是",
value: 9
},
{
name: " 使用",
value: 8
},
{
name: " 怎么",
value: 8
},
{
name: " 电池",
value: 8
},
{
name: " 不能",
value: 8
},
{
name: " 速度",
value: 8
},
{
name: " 客服",
value: 8
},
{
name: " 一星",
value: 8
},
{
name: " 拍照",
value: 8
},
{
name: " 摄像头",
value: 7
},
{
name: " 外观",
value: 7
},
{
name: " 包装",
value: 7
},
{
name: " 到货",
value: 7
},
{
name: " 有点",
value: 7
},
{
name: " 抢购",
value: 6
},
{
name: " 这样",
value: 6
},
{
name: " 性价比",
value: 6
},
{
name: " 一般般",
value: 6
},
{
name: " 出现",
value: 6
},
{
name: " 以前",
value: 6
},
{
name: " 知道",
value: 6
},
{
name: " 一次",
value: 6
},
{
name: " 真的",
value: 6
},
{
name: " 收到",
value: 6
},
{
name: " 其他",
value: 6
},
{
name: " 电量",
value: 6
},
{
name: " 还是",
value: 6
},
{
name: " 不行",
value: 6
},
{
name: " 红米",
value: 6
},
{
name: " 那么",
value: 6
},
{
name: " 挺快",
value: 5
},
{
name: " 现在",
value: 5
},
{
name: " 服务",
value: 5
},
{
name: " 充电",
value: 5
},
{
name: " 流畅",
value: 5
},
{
name: " 系统",
value: 5
},
{
name: " 非常",
value: 5
},
{
name: " 满意",
value: 5
},
{
name: " 购物",
value: 5
},
{
name: " 玩游戏",
value: 5
},
{
name: " 信号",
value: 5
},
{
name: " 不了",
value: 5
},
{
name: " 别人",
value: 5
},
{
name: " 死机",
value: 5
},
{
name: " 耗电",
value: 5
},
{
name: " 一直",
value: 5
},
{
name: " 像素",
value: 5
},
{
name: " 第一次",
value: 5
},
{
name: " 广告",
value: 5
},
{
name: " 买个",
value: 5
},
{
name: " 黑屏",
value: 5
},
{
name: " 为什么",
value: 4
},
{
name: " 猴王",
value: 4
},
{
name: " 视频",
value: 4
},
{
name: " 体验",
value: 4
},
{
name: " 好评",
value: 4
},
{
name: " 闪屏",
value: 4
},
{
name: " 价格",
value: 4
},
{
name: " 饥饿",
value: 4
},
{
name: " 营销",
value: 4
},
{
name: " 发热",
value: 4
},
{
name: " 还行",
value: 4
},
{
name: " 一天",
value: 4
},
{
name: " 需要",
value: 4
},
{
name: " 特别",
value: 4
},
{
name: " 而且",
value: 4
},
{
name: " 运行",
value: 4
},
{
name: " 等到",
value: 4
},
{
name: " 手机卡",
value: 4
},
{
name: " 呵呵",
value: 4
},
{
name: " 时候",
value: 4
},
{
name: " 东西",
value: 4
},
{
name: " 感觉",
value: 4
},
{
name: " 卡机",
value: 4
},
{
name: " 没什么",
value: 4
},
{
name: " 大家",
value: 4
},
{
name: " 没货",
value: 4
},
{
name: " 售后",
value: 4
},
{
name: " 比较",
value: 4
},
{
name: " 退货",
value: 4
},
{
name: " 加价",
value: 3
},
{
name: " 耳机",
value: 3
},
{
name: " 呜呜",
value: 3
},
{
name: " 一分钱",
value: 3
},
{
name: " 一分货",
value: 3
},
{
name: " 默认",
value: 3
},
{
name: " 说好",
value: 3
},
{
name: " 你们",
value: 3
},
{
name: " 一点",
value: 3
},
{
name: " 超级",
value: 3
},
{
name: " 耐用",
value: 3
},
{
name: " 很快",
value: 3
},
{
name: " 断流",
value: 3
},
{
name: " 套装",
value: 3
},
{
name: " 一样",
value: 3
},
{
name: " 发票",
value: 3
},
{
name: " 买回来",
value: 3
},
{
name: " 软件",
value: 3
},
{
name: " 还好",
value: 3
},
{
name: " 以后",
value: 3
},
{
name: " 下单",
value: 3
},
{
name: " 打游戏",
value: 3
},
{
name: " 我们",
value: 3
},
{
name: " 但是",
value: 3
},
{
name: " 一部",
value: 3
},
{
name: " 王者",
value: 3
},
{
name: " 不怎么样",
value: 3
},
{
name: " 看看",
value: 3
},
{
name: " 自己",
value: 3
},
{
name: " 里面",
value: 3
},
{
name: " 边框",
value: 3
},
{
name: " 看着",
value: 3
},
{
name: " 要死",
value: 3
},
{
name: " 原因",
value: 3
},
{
name: " 新机",
value: 3
},
{
name: " 不如",
value: 3
},
{
name: " 老是",
value: 3
},
{
name: " 购买",
value: 3
},
{
name: " 更好",
value: 3
},
{
name: " 相机",
value: 3
},
{
name: " 竟然",
value: 3
},
{
name: " 一分",
value: 3
},
{
name: " 天才",
value: 3
},
{
name: " 荣耀",
value: 3
},
{
name: " 正常",
value: 3
},
{
name: " 回复",
value: 3
},
{
name: " 联系",
value: 3
},
{
name: " 总体",
value: 3
},
{
name: " 反应",
value: 3
},
{
name: " 老爸",
value: 3
},
{
name: " 星期",
value: 3
},
{
name: " 半个",
value: 3
},
{
name: " 打电话",
value: 3
},
{
name: " 不是",
value: 3
},
{
name: " 保护膜",
value: 3
},
{
name: " 充电器",
value: 3
},
{
name: " 买不到",
value: 2
},
{
name: " 老子",
value: 2
},
{
name: " 差评",
value: 2
},
{
name: " 这么",
value: 2
},
{
name: " 真香",
value: 2
},
{
name: " 真是",
value: 2
},
{
name: " 三天",
value: 2
},
{
name: " 填写内容",
value: 2
},
{
name: " 帮别人",
value: 2
},
{
name: " 终于",
value: 2
},
{
name: " 有时候",
value: 2
},
{
name: " 极致",
value: 2
},
{
name: " 还有",
value: 2
},
{
name: " 希望",
value: 2
},
{
name: " 必须",
value: 2
},
{
name: " 好像",
value: 2
},
{
name: " 严重",
value: 2
},
{
name: " 反应速度",
value: 2
},
{
name: " 后面",
value: 2
},
{
name: " 音乐",
value: 2
},
{
name: " 商品",
value: 2
},
{
name: " 哈哈",
value: 2
},
{
name: " 垃圾",
value: 2
},
{
name: " 好用",
value: 2
},
{
name: " 突出",
value: 2
},
{
name: " 价钱",
value: 2
},
{
name: " 耍猴",
value: 2
},
{
name: " 磕碰",
value: 2
},
{
name: " 几次",
value: 2
},
{
name: " 失灵",
value: 2
},
{
name: " 支持",
value: 2
},
{
name: " 快充",
value: 2
},
{
name: " 意思",
value: 2
},
{
name: " 失败",
value: 2
},
{
name: " 整整",
value: 2
},
{
name: " 没收",
value: 2
},
{
name: " 已经",
value: 2
},
{
name: " 无法",
value: 2
},
{
name: " 方面",
value: 2
},
{
name: " 为啥",
value: 2
},
{
name: " 喜欢",
value: 2
},
{
name: " 套餐",
value: 2
},
{
name: " 完全",
value: 2
},
{
name: " 专业",
value: 2
},
{
name: " 选择",
value: 2
},
{
name: " 48mp",
value: 2
},
{
name: " 无线",
value: 2
},
{
name: " 一个月",
value: 2
},
{
name: " 不过",
value: 2
},
{
name: " ldquo",
value: "-"
},
{
name: " rdquo",
value: "-"
},
{
name: " 这种",
value: 2
},
{
name: " 送货",
value: 2
},
{
name: " 卡死",
value: 2
},
{
name: " 来看",
value: 2
},
{
name: " 糊弄人",
value: 2
},
{
name: " note7",
value: 2
},
{
name: " 时间",
value: 2
},
{
name: " 短信",
value: 2
},
{
name: " 滑落",
value: 2
},
{
name: " 那样",
value: 2
},
{
name: " vivo",
value: 2
},
{
name: " 防水",
value: 2
},
{
name: " 等待",
value: 2
},
{
name: " 直播",
value: 2
},
{
name: " 难受",
value: 2
},
{
name: " 四个",
value: 2
},
{
name: " 到手",
value: 2
},
{
name: " 发现",
value: 2
},
{
name: " 掉电",
value: 2
},
{
name: " 华为",
value: 2
},
{
name: " 再也",
value: 2
},
{
name: " 不用",
value: 2
},
{
name: " 给力",
value: 2
},
{
name: " 两天",
value: 2
},
{
name: " 立马",
value: 2
},
{
name: " 两周",
value: 2
},
{
name: " 处理器",
value: 2
},
{
name: " 关机",
value: 2
},
{
name: " 要么",
value: 2
},
{
name: " 满血",
value: 2
},
{
name: " 不会",
value: 2
},
{
name: " 定金",
value: 2
},
{
name: " 付款",
value: 2
},
{
name: " 心情",
value: 2
},
{
name: " 另外",
value: 2
},
{
name: " 游戏",
value: 2
},
{
name: " 公司",
value: 2
},
{
name: " 按键",
value: 2
},
{
name: " 卡顿",
value: 2
},
{
name: " 晚上",
value: 2
},
{
name: " 百分之",
value: 2
},
{
name: " 手机信号",
value: 2
},
{
name: " 一下",
value: 2
},
{
name: " 开学",
value: 2
},
{
name: " 上班",
value: 2
},
{
name: " 上天",
value: 2
},
{
name: " 配送",
value: 2
},
{
name: " 最后",
value: 2
},
{
name: " 太慢",
value: 2
},
{
name: " 手机套",
value: 2
},
{
name: " 笨重",
value: 2
},
{
name: " 半年",
value: 2
},
{
name: " 屏险",
value: 2
},
{
name: " 先发",
value: 2
},
{
name: " 不灵敏",
value: 2
},
{
name: " 硬度",
value: 2
},
{
name: " 这次",
value: 2
},
{
name: " 性能",
value: 2
},
{
name: " 介绍",
value: 2
},
{
name: " 卡针",
value: 2
},
{
name: " 不理",
value: 2
},
{
name: " 这是",
value: 2
},
{
name: " 买来",
value: 2
},
{
name: " 两次",
value: 2
},
{
name: " 网络",
value: 2
},
{
name: " 就裂",
value: 2
},
{
name: " 没用",
value: 2
},
{
name: " 多次",
value: 2
},
{
name: " 钢化",
value: 2
},
{
name: " 一星怪",
value: 1
},
{
name: " 新款",
value: 1
},
{
name: " 你行",
value: 1
},
{
name: " 没送",
value: 1
},
{
name: " 一个多",
value: 1
},
{
name: " 礼拜",
value: 1
},
{
name: " 只能",
value: 1
},
{
name: " 价位",
value: 1
},
{
name: " 闪退",
value: 1
},
{
name: " 抢到",
value: 1
},
{
name: " 其它",
value: 1
},
{
name: " 便宜",
value: 1
},
{
name: " 两百",
value: 1
},
{
name: " 盈利",
value: 1
},
{
name: " 机智",
value: 1
},
{
name: " 更新换代",
value: 1
},
{
name: " 太乱",
value: 1
},
{
name: " 赔付",
value: 1
},
{
name: " 自营",
value: 1
},
{
name: " 产品",
value: 1
},
{
name: " 手持",
value: 1
},
{
name: " 夜景",
value: 1
},
{
name: " 机子",
value: 1
},
{
name: " 拆过",
value: 1
}],
//小鸟图片
image: "data:image/png;base64,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"
}
var maskImage = new Image();
maskImage.src = data.image
// 指定图表的配置项和数据
option = {
tooltip: {
show: true
},
series: [{
type: "wordCloud",
gridSize:6,
//shape:'diamond',
maskImage: maskImage,
sizeRange: [12, 50],
width:800,
height:500,
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data:data.value
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.资源源码
资源源码已上传，https://download.csdn.net/download/Ace_2/12236165
资源我设置的0积分下载啊，咋还是要积分才能下。。。
需要源码的可以关注公众号“编程江湖”，回复“echarts”领取资源。
