This commit is contained in:
duanxiaohai
parent
603e339ebd
commit
86889c99bb
|
|
@ -1,233 +0,0 @@
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
ref="chart"
|
|
||||||
style="width: 100%; height: calc(100% - 46px); min-height: 150px"
|
|
||||||
></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { onMounted, reactive, ref } from "vue";
|
|
||||||
// 局部引入echarts核心模块
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
|
|
||||||
const chart = ref(null); // 创建DOM引用
|
|
||||||
|
|
||||||
const data = ["大街乡", "社阳乡", "沐尘畲族乡", "庙下乡", "溪口镇", "罗家乡"];
|
|
||||||
const datas = ["8", "10", "7", " 23", "25", "250"];
|
|
||||||
|
|
||||||
let zoomShow = true;
|
|
||||||
// if (data.length > 7) {
|
|
||||||
// zoomShow = true;
|
|
||||||
// } else {
|
|
||||||
// zoomShow = false;
|
|
||||||
// }
|
|
||||||
|
|
||||||
let option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
type: "shadow",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {},
|
|
||||||
grid: {
|
|
||||||
top: "-2%",
|
|
||||||
left: "3%",
|
|
||||||
right: "8%",
|
|
||||||
bottom: "3%",
|
|
||||||
containLabel: true,
|
|
||||||
// containLabel:false,
|
|
||||||
color: "#ffffff",
|
|
||||||
},
|
|
||||||
// dataZoom: [
|
|
||||||
// {//在内部可以纵向拖动
|
|
||||||
// show: zoomShow,
|
|
||||||
// type: "inside",
|
|
||||||
// startValue: 0,
|
|
||||||
// endValue: 2,
|
|
||||||
// minValueSpan: 2,
|
|
||||||
// maxValueSpan: 2,
|
|
||||||
// yAxisIndex: [0],
|
|
||||||
// zoomOnMouseWheel: false, // 关闭滚轮缩放
|
|
||||||
// moveOnMouseWheel: true, // 开启滚轮平移
|
|
||||||
// moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
|
||||||
// },
|
|
||||||
// { //纵向使用滚动条
|
|
||||||
// show: zoomShow,
|
|
||||||
// type: "slider",
|
|
||||||
// realtime: true,
|
|
||||||
// startValue: 0,
|
|
||||||
// endValue: 2,
|
|
||||||
// width: "3.5",
|
|
||||||
// height: "80%",
|
|
||||||
// yAxisIndex: [0], // 控制y轴滚动
|
|
||||||
// fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
|
|
||||||
// borderColor: "rgba(17, 100, 210, 0.12)",
|
|
||||||
// backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
|
|
||||||
// handleSize: 0, // 两边手柄尺寸
|
|
||||||
// showDataShadow: false, //是否显示数据阴影 默认auto
|
|
||||||
// showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
|
||||||
// top: "1%",
|
|
||||||
// right: "5",//距离右侧的距离
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
//纵向使用滚动条
|
|
||||||
id: "dataZoomY",
|
|
||||||
type: "slider",
|
|
||||||
yAxisIndex: [0], // 控制y轴滚动
|
|
||||||
filterMode: "empty", //数据过滤,只改变数轴范围。
|
|
||||||
width: "10",
|
|
||||||
height: "100%",
|
|
||||||
right: "3%", //距离右侧的距离
|
|
||||||
orient: "vertical", //布局方式是横还是竖 'horizontal'：水平。'vertical'：竖直。
|
|
||||||
start: 0, //开始 数据窗口范围的,范围是：0 ~ 100
|
|
||||||
end: 70, //结束
|
|
||||||
zoomLock: true, //不能缩放
|
|
||||||
fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
|
|
||||||
borderColor: "rgba(17, 100, 210, 0.12)",
|
|
||||||
backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
|
|
||||||
handleSize: 0, // 两边手柄尺寸
|
|
||||||
showDataShadow: false, //是否显示数据阴影 默认auto
|
|
||||||
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
|
|
||||||
|
|
||||||
zoomOnMouseWheel: false, // 关闭滚轮缩放
|
|
||||||
moveOnMouseWheel: true, // 开启滚轮平移
|
|
||||||
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
|
||||||
},
|
|
||||||
],
|
|
||||||
calculable: true,
|
|
||||||
xAxis: {
|
|
||||||
// name: '/次',
|
|
||||||
type: "value",
|
|
||||||
data: datas,
|
|
||||||
axisLabel: {
|
|
||||||
//坐标轴刻度标签的相关设置
|
|
||||||
textStyle: {
|
|
||||||
color: "#ffffff",
|
|
||||||
},
|
|
||||||
// formatter: `{value}/次` // 在每个x轴坐标都添加了单位
|
|
||||||
formatter: function (value, index) {
|
|
||||||
if (index === datas.length - 1) {
|
|
||||||
// 判断是否为最后一个标签
|
|
||||||
return value + "/次"; // 添加单位
|
|
||||||
} else {
|
|
||||||
return value; // 不是最后一个标签则不添加单位
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
//分割线配置
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "rgba(255, 255, 255, 0.2)",
|
|
||||||
width: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisPointer: {
|
|
||||||
label: {
|
|
||||||
autoSplitNumber: 5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: true, // 这里设置x轴刻度不显示
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
show:true,
|
|
||||||
type: "category", //横向显示
|
|
||||||
data: data,
|
|
||||||
// max:10,
|
|
||||||
//y轴文字的配置
|
|
||||||
axisLabel: {
|
|
||||||
show: true ,
|
|
||||||
inside: false,
|
|
||||||
// bargap: 0.5, // 设置固定的间隔
|
|
||||||
textStyle: {
|
|
||||||
color: "#ffffff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
//y轴线的颜色以及宽度
|
|
||||||
axisLine: {
|
|
||||||
show:true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ffffff",
|
|
||||||
width: 1,
|
|
||||||
type: "solid",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: true, // 这里设置x轴刻度不显示
|
|
||||||
},
|
|
||||||
// 开启滚动
|
|
||||||
// scrollbar: {
|
|
||||||
// orient: "vertical",
|
|
||||||
// // 设置滚动区域的高度
|
|
||||||
// height: 100,
|
|
||||||
// },
|
|
||||||
//分割线配置
|
|
||||||
splitLine: {
|
|
||||||
// show: false,
|
|
||||||
show:true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ffffff",
|
|
||||||
width: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: "bar",
|
|
||||||
name: "次数",
|
|
||||||
data: datas,
|
|
||||||
barWidth: 15, //柱宽
|
|
||||||
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
|
||||||
// barCategoryGap: "10" /*多个并排柱子设置柱子之间的间距*/,
|
|
||||||
barMaxWidth: 20, // 每一个都要设置
|
|
||||||
barMinWidth: 5, // 每一个都要设置
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "rgba(0, 183, 255, 1)",
|
|
||||||
borderRadius: [0, 0, 50, 0], //圆角边框
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{ offset: 0, color: "rgba(26, 255, 217, 0)" },
|
|
||||||
{ offset: 1, color: "rgba(0, 183, 255, 1)" },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// 基于准备好的dom，初始化echarts实例
|
|
||||||
// var myChart = echarts.init(document.getElementById('main'));
|
|
||||||
// Vue3中： 需要引入
|
|
||||||
var myChart = echarts.init(chart.value);
|
|
||||||
|
|
||||||
// init(); // vue3.2没有this
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// myChart.on("scroll", function (event) {
|
|
||||||
// // 根据滚动位置动态计算bargap
|
|
||||||
// var bargap = event.scrollData / 10000; // 假设滚动1%对应0.5个bargap
|
|
||||||
// myChart.setOption({
|
|
||||||
// yAxis: {
|
|
||||||
// axisLabel: {
|
|
||||||
// bargap: bargap,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
|
|
||||||
// 单图表响应式: 跟随浏览器大小改变
|
|
||||||
// window.addEventListener("resize", () => {
|
|
||||||
// myChart.resize();
|
|
||||||
// });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -177,7 +177,6 @@ import eP3_2 from "./echarts_yl/eP3_2.vue";
|
||||||
import ePie2 from "./echarts_yl/pie2.vue";
|
import ePie2 from "./echarts_yl/pie2.vue";
|
||||||
import eGraph from "./echarts_yl/graph.vue";
|
import eGraph from "./echarts_yl/graph.vue";
|
||||||
import ePie3d from "./echarts_yl/pie3d.vue";
|
import ePie3d from "./echarts_yl/pie3d.vue";
|
||||||
// import waterBall from "./echarts_yl/waterBall.vue";
|
|
||||||
import ylJHSY from "./echarts_yl/ylJHSY.vue";
|
import ylJHSY from "./echarts_yl/ylJHSY.vue";
|
||||||
import ylSMFW from "./echarts_yl/ylSMFW.vue";
|
import ylSMFW from "./echarts_yl/ylSMFW.vue";
|
||||||
import ylXZZC from "./echarts_yl/ylXZZC.vue";
|
import ylXZZC from "./echarts_yl/ylXZZC.vue";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue