1、字符云
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/wordCloud' // 使用字符云就加载wordCloud模块，按需加载
],
function (ec) {
var myChart=ec.init(document.getElementById('fd-zfy'));
//option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档
var option = {
title: {
text: ' ',
link: 'http://www.google.com/trends/hottrends'
},
tooltip: {
show: false
},
series: [{
name: ' ',
type: 'wordCloud',
size: ['80%', '80%'],//大小
textRotation : [0, 0],
textPadding:30,//文字间的距离//不能太大 否则会显示不全 有的value不显示 项目中已经从30改成5
autoSize: {
enable: true,
minSize: 14
},
data: [
{
name: "微信",
value: 10000,
center:['50%', '50%'],//设置为中心位置
itemStyle: {//设置字体 颜色 字号等
normal: {
color: '#67f130',
fontFamily:'microsoft yahei',
fontSize:100,
fontWeight:'bold'
}
}
},
{
name: "新浪微博",
value: 6181,
itemStyle: {
normal: {
color: '#3485dc',
fontFamily:'microsoft yahei',
fontSize:43,
fontWeight:'bold'
}
}
},
{
name: "天涯论坛",
value: 1234,
itemStyle: {
normal: {
color: '#3485dc',
fontFamily:'microsoft yahei',
fontSize:48,
fontWeight:'bold'
}
}
},
{
name: "百度贴吧",
value: 1999,
itemStyle: {
normal: {
color: '#3485dc',
fontFamily:'microsoft yahei',
fontSize:46,
fontWeight:'bold'
}
}
},
{
name: "今日头条",
value: 2888,
itemStyle: {
normal: {
color: '#3485dc',
fontFamily:'microsoft yahei',
fontSize:43,
fontWeight:'bold'
}
}
},
{
name: "新浪长微博",
value: 1777,
itemStyle: {
normal: {
color: '#21406f',
fontFamily:'microsoft yahei',
fontSize:37,
fontWeight:'bold'
}
}
},
{
name: "西祠胡同",
value: 4666,
itemStyle: {
normal: {
color: '#275b9b',
fontFamily:'microsoft yahei',
fontSize:37,
fontWeight:'bold'
}
}
},
{
name: "宿迁 12345",
value: 3555,
itemStyle: {
normal: {
color: '#1e4170',
fontFamily:'microsoft yahei',
fontSize:37,
fontWeight:'bold'
}
}
},
{
name: "新浪博客",
value: 2444,
itemStyle: {
normal: {
color: '#255693',
fontFamily:'microsoft yahei',
fontSize:37,
fontWeight:'bold'
}
}
},
{
name: "新浪博客",
value: 5333,
itemStyle: {
normal: {
color: '#255693',
fontFamily:'microsoft yahei',
fontSize:37,
fontWeight:'bold'
}
}
},
{
name: "新浪长微博",
value: 1222,
itemStyle: {
normal: {
color: '#21406f',
fontFamily:'microsoft yahei',
fontSize:37,
fontWeight:'bold'
}
}
},
{
name: "人民网",
value: 2111,
itemStyle: {
normal: {
color: '#21406f',
fontFamily:'microsoft yahei',
fontSize:37,
fontWeight:'bold'
}
}
}
]
}]
};
// 为echarts对象加载数据
myChart.setOption(option);
//绑定resize（屏幕变大变小事件）改变echarts的大小 自适应
window.addEventListener('resize', function () {
myChart.resize();
})
}
);
2、饼图
require(
[
'echarts',
'echarts/chart/pie' // 使用饼图就加载pie模块，按需加载
],
/*
//常规圆环
function (ec) {
var myChart=ec.init(document.getElementById('fd-bt'));
//option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档
var option = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable : true,
color:['#05b28e', '#4ac5df','#5f83d4'],//设置每一块的颜色
series : [
{
show:false,
name:'',
type:'pie',
radius : [150, 120],//设置大小
// for funnel
x: '60%',//设置位置
'35%',
funnelAlign: 'left',
max: 1048,
data:[
{
value:335,
name:'案件相关事项',
itemStyle: {//设置字体颜色 以及要在lable上显示的数据
normal: {
label:{
textStyle:{
color: '#05b08c',
fontFamily:'microsoft yahei',
fontSize:20,
fontWeight:'bold'
},
formatter: '{b} :
{c} 件' +//
换行//要显示的数据
'({d}%)'
},
labelLine:{
length:100//label延伸出来的线长度
}
}
}
},
{
value:310,
name:'执行案件',
itemStyle: {
normal: {
label: {
textStyle: {
color: '#4ac5df',
fontFamily: 'microsoft yahei',
fontSize: 20,
fontWeight: 'bold'
},
formatter: '{b} :
{c}件' +
'({d}%)'
},
labelLine:{
length:100
}
}
}
},
{
value:234,
name:'案件相关干系人',
color:'red',
itemStyle: {
normal: {
label: {
textStyle: {
color: '#5f83d4',
fontFamily: 'microsoft yahei',
fontSize: 20,
fontWeight: 'bold'
},
formatter: '{b} :
{c}件' +
'({d}%)'
},
labelLine:{
length:100
}
}
}
}
]
}
]
};
var ecConfig = require('echarts/config');
// 为echarts对象加载数据
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
})
}*/
function (ec) {
var myChart = ec.init(document.getElementById('fd-bt'));
//option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档
var option = {//饼图中的南丁格尔玫瑰图
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable : true,
color:['#05b28e', '#4ac5df','#5f83d4'],
series : [
{
type:'pie',
radius : [50, 100],
center : ['50%', 200],
roseType : 'area',
x: '50%', // for funnel
max: 40, // for funnel
sort : 'ascending', // for funnel
data:[
{
value:635,
name:'案件相关事项',
itemStyle: {
normal: {
label:{
textStyle:{
color: '#05b08c',
fontFamily:'microsoft yahei',
fontSize:20,
fontWeight:'bold'
},
formatter: '{b}
{c} 件' +
'({d}%)'
},
labelLine:{
length:100
}
}
}
},
{
value:810,
name:'执行案件',
itemStyle: {
normal: {
label: {
textStyle: {
color: '#4ac5df',
fontFamily: 'microsoft yahei',
fontSize: 20,
fontWeight: 'bold'
},
formatter: '{b}
{c}件' +
'({d}%)'
},
labelLine:{
length:100
}
}
}
},
{
value:234,
name:'案件相关干系人',
itemStyle: {
normal: {
label: {
textStyle: {
color: '#5f83d4',
fontFamily: 'microsoft yahei',
fontSize: 20,
fontWeight: 'bold'
},
formatter: '{b}
{c}件' +
'({d}%)'
},
labelLine:{
length:100
}
}
}
}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
})
}
);
3、柱状图
1 require( 2 3 [ 4 'echarts', 5 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 6 ], 7 8 function (ec) { 9 10 var myChart=ec.init(document.getElementById('fd-zzt')); 11 12 //option主要是图标的一些设置，这不是这篇文章的重点，关于具体的设置可以参考官方的文档说明文档 13 14 var option = { 15 16 title : { 17 show:false, 18 text: '正面负面舆情趋势分析', 19 subtext: ' ' 20 }, 21 grid:{ 22 borderWidth:0//把边框线干掉 23 }, 24 tooltip : { 25 trigger: 'axis' 26 }, 27 legend: { 28 data:['正面','负面'],//右上角的标题的内容 位置 颜色字号 29 x:'80%', 30 y:'10', 31 textStyle:{ 32 color:"#cde7ff", 33 fontSize:22 34 } 35 }, 36 toolbox: { 37 show : false, 38 feature : { 39 mark : {show: true}, 40 dataView : {show: true, readOnly: false}, 41 magicType : {show: true, type: ['line', 'bar']}, 42 restore : {show: true}, 43 saveAsImage : {show: true} 44 } 45 }, 46 calculable : false, 47 xAxis : [//x轴的文字 48 { 49 type : 'category', 50 data : ['2017年01月','2017年02月','2017年03月','2017年04月','2017年05月','2017年06月'], 51 axisLine: { 52 lineStyle: { 53 color: '#828998' 54 } 55 }, 56 axisLabel:{ 57 textStyle:{ 58 color:"#16e6f8", 59 fontSize:24 60 } 61 }, 62 splitLine:{ 63 show:false//去掉多余的线 64 } 65 66 } 67 ], 68 yAxis : [//y轴的线 69 { 70 name:'舆情数', 71 type : 'value', 72 splitLine:{ 73 show:false 74 }, 75 nameTextStyle:{ 76 color: '#06d6e0', 77 fontSize:26//修改name的颜色 字号 78 }, 79 axisLine: { 80 lineStyle: { 81 color: '#828998'//线的颜色 82 } 83 }, 84 axisLabel:{ 85 textStyle:{ 86 color:"#16e6f8" 87 } 88 } 89 } 90 ], 91 axis:{ 92 93 }, 94 series : [ 95 96 { 97 name:'正面', 98 type:'bar', 99 data:[26, 22, 22, 66, 89, 114], 100 itemStyle:{ 101 normal:{ 102 color:'#05ac89' 103 } 104 }, 105 markPoint : { 106 data : [ 107 108 ], 109 itemStyle: { 110 normal: { 111 color: '#21406f', 112 fontFamily:'microsoft yahei', 113 fontSize:37, 114 fontWeight:'bold' 115 } 116 } 117 }, 118 markLine : { 119 data : [ 120 {type : 'average', name: '平均值'} 121 ] 122 }, 123 barWidth : 65 124 }, 125 126 { 127 name:'负面', 128 type:'bar', 129 data:[66, 92, 92, 118, 97, 96], 130 itemStyle:{ 131 normal:{ 132 color:'#27abe2' 133 } 134 }, 135 markPoint : { 136 data : [ 137 138 ], 139 itemStyle: { 140 normal: { 141 color: '#21406f', 142 fontFamily:'microsoft yahei', 143 fontSize:37, 144 fontWeight:'bold' 145 } 146 } 147 }, 148 markLine : { 149 data : [ 150 {type : 'average', name : '平均值'} 151 ] 152 }, 153 barWidth : 65 154 } 155 ] 156 }; 157 158 159 160 // 为echarts对象加载数据 161 myChart.setOption(option); 162 window.addEventListener('resize', function () { 163 myChart.resize(); 164 }) 165 } 166 167 );