vue-echar 条形图(含底部滑动、图表自适应)
<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>
<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: { // 控制图的大小，调整下面这些值就可以，
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>
cli中使用echart的 方法 https://zhuanlan.zhihu.com/p/130390187
参考: https://www.cnblogs.com/kaibindirver/p/13544427.html
----------------------------------------------------------------------------使用脚手架的例子
<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>
后记:
在脚手架使用的时候图表数据展示异常，然后增加了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); }, 后记3: 上面的监听 在离开页面以后没有销毁监听要添加销毁监听，见下面链接 https://www.cnblogs.com/kaibindirver/p/13934818.html