一.简介
参考ECharts快速入门：https://www.cnblogs.com/yszd/p/11166048.html
二.代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
<div style='width:100%;height:100%'>
<div id='back' style='width:60%;height:400px;float:left;'></div>
<div id='main' style='width:40%;height:400px;float:left;'></div>
<div id='left' style='width:60%;height:400px;float:left;'></div>
<div id='right' style='width:40%;height:400px;float:left;'></div>
</div> <!-- 引入ECharts文件 -->
<script src='js/echarts-all.js'></script>
<script src='js/echarts-wordcloud.min.js'></script>
<script>
function createRandomItemStyle(){
return {
normal: {
color: 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')'
}
};
}
//基于准备好的DOM，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart2 = echarts.init(document.getElementById('back'));
var myChart3 = echarts.init(document.getElementById('left'));
var myChart4 = echarts.init(document.getElementById('right')); /* var loadingTicket = myChart.showLoading({
text: 'loading',
color: '#4cbbff',
textColor: '#4cbbff',
maskColor: 'rgba(0, 0, 0, 0.9)',
}); */ //指定图表的配置项和数据
option = {
title: {
text: '文本分析算法词云'
},
tooltip:{
trigger:'axis'
},
toolbox: {
show: true,
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{show:true,type:['line','bar']},
restore:{show:true},
saveAsImage:{show:true}
}
},
series: [{
name: '词云',
type: 'wordCloud',
size: ['80%', '80%'],
textRotation : [0, 45, 90, -45],
textPadding: 0,
autoSize: {
enable: true,
minSize: 14
},
data:[
{
name: "质量",
value: 6564,
itemStyle: createRandomItemStyle()
},
{
name: "稽查",
value: 4181,
itemStyle: createRandomItemStyle()
},
{
name: "流程",
value: 3386,
itemStyle: createRandomItemStyle()
},
{
name: "核实",
value: 2655,
itemStyle: createRandomItemStyle()
},
{
name: "现场",
value: 2467,
itemStyle: createRandomItemStyle()
},
{
name: "管理",
value: 2244,
itemStyle: createRandomItemStyle()
},
{
name: "用户",
value: 1898,
itemStyle: createRandomItemStyle()
},
{
name: "系统",
value: 1484,
itemStyle: createRandomItemStyle()
},
{
name: "整改",
value: 1112,
itemStyle: createRandomItemStyle()
},
{
name: "电力系统",
value: 965,
itemStyle: createRandomItemStyle()
},
{
name: "河南供电局",
value: 847,
itemStyle: createRandomItemStyle()
},
{
name: "交变电高压线路",
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()
}
]
}]
}; option2 = {
title: {
text: '热词分布'
},
tooltip : {
trigger: 'axis',
axisPointer : {
type: 'shadow'
}
},
legend: {
data:['稽查工单','隐患问题库','典型案例库'],
axisLabel:{
show:true,
textStyle:{
fontSize:16
}
}
},
toolbox: {
show : true,
orient : 'vertical',
y : 'center',
feature : {
mark : {show: true},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ["郑州","平顶山","商丘","洛阳","信阳","安阳","驻马店","新乡","开封","许昌","南阳","焦作","漯河","濮阳","周口","鹤壁","三门峡","济源"],
axisLabel:{
show:true,
textStyle:{
fontSize:16
}
}
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true},
axisLabel:{
show:true,
textStyle:{
fontSize:16
}
}
}
],
grid: {
x2:40
},
series : [
{
name:'稽查工单',
type:'bar',
stack: '总量'
},
{
name:'隐患问题库',
type:'bar',
stack: '总量'
},
{
name:'典型案例库',
type:'bar',
stack: '总量',
itemStyle:{
normal:{
label:{
show:true,
position:'top',
formatter:'{c}',
fontSize:16
}
}
}
}
]
}; option3 = {
title : {
text: '一周内热词变化',
subtext: '测试数据'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高热词','最低热词']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}'
}
}
],
series : [
{
name:'最高热词',
type:'line',
data:[114, 131, 125, 213, 412, 143, 310],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'最低热词',
type:'line',
data:[114, 131, 125, 213, 412, 143, 310],
markPoint : {
data : [
{name : '周最低', value : 114, xAxis: 0, yAxis: 1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
}; option4 = {
title : {
text: '热词层级',
subtext: '测试数据'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : '0px',
y : '60px',
data:['直达','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'访问来源',
type:'pie',
selectedMode: 'single',
radius : [0, 70], // for funnel
x: '20%',
width: '40%',
funnelAlign: 'right',
max: 1548, itemStyle : {
normal : {
label : {
position : 'inner'
},
labelLine : {
show : false
}
}
},
data:[
{value:335, name:'典型案例库'},
{value:679, name:'隐患问题库'},
{value:1548, name:'稽查工单', selected:true}
]
},
{
name:'访问来源',
type:'pie',
radius : [100, 140], // for funnel
x: '60%',
width: '35%',
funnelAlign: 'left',
max: 1048, data:[
{value:335, name:'直达'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1048, name:'百度'},
{value:251, name:'谷歌'},
{value:147, name:'必应'},
{value:102, name:'其他'}
]
}
]
}; var series = option["series"];
var series2 = option2["series"];
var loc = 0;
var fun = function (params) {
var data = 0;
for(var i=0,len = series2.length;i<len;i++){
data += series2[i].data[loc];
}
loc += 1;
return data
}
//设置每种类别的值
series2[0]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
series2[1]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
series2[2]['data'] = [320, 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123] //加载页面时候替换最后一个series的formatter
series2[series2.length-1]["itemStyle"]["normal"]["label"]["formatter"] = fun //使用刚指定的配置项和数据显示图表
//clearTimeout(loadingTicket);
loadingTicket = setTimeout(function (){
//myChart.hideLoading();
myChart.setOption(option); //myChart2.hideLoading();
myChart2.setOption(option2); myChart3.setOption(option3);
myChart4.setOption(option4);
},300); myChart.connect(myChart2);
myChart2.connect(myChart); setTimeout(function (){
window.onresize = function () {
myChart.resize();
myChart2.resize();
}
},200) myChart.on('click', function (params) {
//获取随机数
var jc = Math.random();
var yh = (1 - jc) * Math.random();
var dx = (1 - jc) - yh; series2[0]['data'] = [parseInt(params.value * jc), 332, 301, parseInt(params.value * dx), 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
series2[1]['data'] = [parseInt(params.value * yh), 332, 301, 334, 390, 330, parseInt(params.value * jc), 342, 223, 123, 301, 334, 390, 330, 320, 342, 223, 123]
series2[2]['data'] = [parseInt(params.value * dx), 332, 301, 334, 390, 330, 320, 342, 223, 123, 301, 334, 390, 330, 320, parseInt(params.value * jc), 223, 123] var loc = 0;
var fun = function (params) {
var data = 0;
for(var i=0,len = series2.length;i<len;i++){
data += series2[i].data[loc];// - parseInt(Math.random() * 100)
}
loc += 1;
return data
} //加载页面时候替换最后一个series的formatter
series2[series2.length-1]["itemStyle"]["normal"]["label"]["formatter"] = fun
myChart2.setOption(option2);
}); myChart2.on('click', function (params){
series[series.length-1]['data'][0]['name'] = '资产'
series[series.length-1]['data'][0]['value'] = parseInt(Math.random() * 10000)
myChart.setOption(option);
})
</script>
</body>
</html>
三.效果
