vue-echar 条形图(含底部滑动、图表自适应)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<div id='hh2' style="position: absolute;left:80px;display:none;">
<div style="height:100px;"></div>
<div id="main" style="width: 1200px;height:400px;"></div> 注意要给高度 不然图表出不来
<hr>
<div style="height:100px;"></div>
<H3>营销线-各部门接口录入统计</H3> <p id="zongshu"></p>
<div id="main2" style="width: 1000px;height:600px;"></div>
<div style="height:200px;"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<div id='hh' style="left:45%;top:200px;position:absolute;">
<form name=loading>
<P align=center><FONT face=Arial color=#0066ff size=5>拼命计算中...</FONT>
<INPUT style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BORDER-BOTTOM-style: none" size=15 name=chart>
<BR>
<INPUT style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center" size=15 name=percent>
</div>
<script language="javascript">
var bar=0
var line="||"
var amount="||"
count()
function count(){
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99){
setTimeout("count()",1200);
}else{
document.getElementById("hh").style.display = "none";
document.getElementById("hh2").style.display = "block";
}
}
</script>
<script>
axios.get('/test_request_sum2')
.then(function (response) {
console.log(response.data);
var b=response.data["proname"]
var b2=response.data["proSum"]
var b3=response.data["bigname"]
var b4=response.data["bignum"]
var b5=response.data["zongshu"]
document.getElementById("zongshu").innerHTML ='当前总录入接口: '+b5;
document.getElementById("hh").style.display = "none";
document.getElementById("hh2").style.display = "block";
// var b=['效能中台--营销线', '效能中台-定制课电销', '定制课--上课系统', '数字化-投放工作台', 'B端--AI双师', 'B端--等考', 'B端--比赛', 'B端--未来教室', '数字化-外部账号', '效能中台--转介绍', '新零售--谷雨平台', '效能中台-定制课班主任', 'B端--B2C', '数字化-交易系统管理后台', '数字化-内部账号系统', '数字化-权限系统', '数字化-财务系统', '定制课--老师端', '定制课--教务端']
// var b2=[26, 112, 12, 112, 71, 17, 10, 54, 42, 31, 69, 61, 26, 3, 10]
// var b3=["定制课-", "新零售-", "效能中台", "数字化-", "B端--"]
// var b4=[12, 69, 230, 167, 178]
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), 'light') #这个是主题 light是蓝色 红色是 'dark'
// 指定图表的配置项和数据
var option = {
grid: { // 控制图的大小，调整下面这些值就可以，
},
title: {
text: '营销线-各项目接口录入统计'
},
tooltip: {},
legend: {
// data:['销量2']
},
xAxis: {
data:b
},
yAxis: {},
series: [{
name: '接口数量',
type: 'bar',
data:b2
}],
xAxis: [
{
type: 'category',
name: '',
boundaryGap : true,
axisLabel: { //底部文字倾斜
interval: 0,
rotate:25
},
data:b
}
],
dataZoom: [
{
show: true,
realtime: true,
y: 1680,
height: 1125,
start: 0,
end: 20
},
{
type: 'slider',
show: true,
start: 0,
end: 10,
handleSize: 0,
height: 10,
top:40
},
{
type: 'inside',
start: 0,
end: 0
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//各部门接口总数
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main2'))
// 指定图表的配置项和数据
option = {
// backgroundColor: 'yellow',
//起泡提示
tooltip: {
trigger: 'axis',
// backgroundColor: 'rgba(255,255,255,0.8)',
// extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
},
grid: {
// top: '0.5%',
left: '3%',
right: '11%',
bottom: '2.5%',
containLabel: true
},
yAxis: [{
type: 'category',
data: b3,
inverse: true,
axisTick: {
alignWithLabel: true,
},
// y坐标文字颜色
axisLabel: {
margin: 10,
textStyle: {
fontSize: 18,
color: 'balck'
}
},
axisLine: {
lineStyle: {
color: 'balck'
}
},
}],
//横坐标
xAxis: [{
type: 'value',
axisLabel: {
margin: 10,
interval: 1, //横轴信息全部显示
rotate: -30, //-15度角倾斜显示 #通过旋转的角度，可以控制x轴下面的文案 的遮挡问题
textStyle: {
fontSize: 18,
color: 'black',
}
},
axisLine: {
lineStyle: {
color: 'black'
}
},
splitLine: {
lineStyle: {
color: 'black'
}
}
}],
//部门名字
series: [{
// name: 'Top 10',
type: 'bar',
barWidth: 26,
data: b4,
label: {
normal: {
show: true,
position: 'insideRight',
textStyle: {
// color: 'blue', //color of value
fontSize: 18,
}
}
},
// 条形图颜色
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#0590eb' // 0% 处的颜色
}, {
offset: 1,
color: '#08e3f1' // 100% 处的颜色
}], false),
barBorderRadius: [0, 15, 15, 0],
shadowColor: 'rgba(0,0,0,0.1)',
shadowBlur: 3,
shadowOffsetY: 3
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
</script>
</html>
cli中使用echart的 方法 https://zhuanlan.zhihu.com/p/130390187
参考: https://www.cnblogs.com/kaibindirver/p/13544427.html
----------------------------------------------------------------------------使用脚手架的例子
后记:
在脚手架使用的时候图表数据展示异常，然后增加了watch监听，只要数据有变化重新执行生成图表的函数
发现不要把图表生成的函数 放到 mounted里面(y轴展示异常) ，要放到watch里面就可以正常展示
其他 https://www.cnblogs.com/kaibindirver/p/13544427.html
后计2:
发现在一个页面出现多个图表的话 自适应 要适应事件去绑定 来自适应大小
