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=" 1200px;height:400px;"></div> 注意要给高度 不然图表出不来
<hr>
<div style="height:100px;"></div>
<H3>营销线-各部门接口录入统计</H3> <p id="zongshu"></p>
<div id="main2" style=" 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 = {

color: ['#1890ff'，'#1890ff'], //控制条形颜色，

grid: { // 控制图的大小，调整下面这些值就可以，

y: 40, //控制y轴文字与底部的距离 ，可以避免遮挡文案
x: 30, //控制x轴文字与左边的距离

},
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

----------------------------------------------------------------------------使用脚手架的例子

<template>
<div>
<a-row style="margin: 20px">
<a-col>
<div
id="container"
v-bind:style="{ size, height: height }"
></div>
</a-col>
</a-row>
<hr />
</div>
</template>

<script>
import echarts from "echarts";

export default {
props: {
datalist: {
type: Array,
},
},
name: "addcase",
data() {
return {
size:"110%",
height:"300px",
screenWidth: '',
screenHeight: '',
};
},
mounted() {
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
//这里是监控浏览器变大 或者 缩放 ，当有变化时，会触发showChart()函数里面的charts.resize();//重新适配大小(自适应屏幕)  参考 https://www.cnblogs.com/jin-zhe/p/10506238.html
window.onresize = () => {
console.log("监控屏幕变化")
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
this.showChart();
};
},
//持续监听，当datalist变量有变化就执行this.showChart()函数;
watch: {
datalist: function () {
this.showChart();
},
screenWidth: function () {
console.log("触发函数变化");
},
},
methods: {
showChart() {
// 基于准备好的dom，初始化echarts实例
var charts = echarts.init(document.getElementById("container"), "light");
// 指定图表的配置项和数据
var option = {
color: ['#1890ff'，'#1890ff'], //控制条形颜色，
grid: {
// 控制图的大小，调整下面这些值就可以，
y: 40, //控制y轴文字与底部的距离 ，可以避免遮挡文案
x: 30, //控制x轴文字与左边的距离
},
title: {
text: "本周新增用例数",
},
tooltip: {},
legend: {},
xAxis: {
//底部字横着放
axisLabel: {
margin: 10,
interval: 0, //横轴信息全部显示
rotate: -15, //-15度角倾斜显示
},
data: this.datalist[0],
},

yAxis: {
type:'value',
//控制y轴间隔单位
minInterval:0
},

series: [
{
name: "",
type: "bar",
data: this.datalist[1],
},
],
// 区域缩放控制器
dataZoom: [
{
// show: true,
// realtime: true,
y: 1680,
// height: 1125,
start: 0,
end: 10,
},

{
type: "slider",
show: true,
start: 0,
end: 10,
handleSize: 0,
height: 10,
top: 40,
},
// 滚轮控制缩放图表
{
type: "inside",
start: 0,
end: 0,
},
]
};

// 使用刚指定的配置项和数据显示图表。
charts.setOption(option);
charts.resize();//重新适配大小 参考 https://blog.csdn.net/amao_aguai/article/details/83072742
},
},
};
</script>

<style scoped>
</style>
 

后记:

在脚手架使用的时候图表数据展示异常，然后增加了watch监听，只要数据有变化重新执行生成图表的函数

发现不要把图表生成的函数 放到 mounted里面(y轴展示异常) ，要放到watch里面就可以正常展示

 其他 https://www.cnblogs.com/kaibindirver/p/13544427.html

后计2:

发现在一个页面出现多个图表的话 自适应 要适应事件去绑定 来自适应大小

mounted() {
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
//这里是监控浏览器变大 或者 缩放 ，当有变化时，会触发showChart()函数里面的charts.resize();//重新适配大小
window.addEventListener('resize', () => {
console.log('本周执行用例，监控屏幕大小');
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
this.showChart();
}, false);
},
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kaibindirver/p/13799903.html