Compare commits
No commits in common. "3475f97ed4a1b46e34f0e97975b09c6ba4ca6cea" and "60c31db526d133d9fef6337fdf0aa7f707e509ab" have entirely different histories.
3475f97ed4
...
60c31db526
@ -128,11 +128,11 @@ export default {
|
||||
option.series[1].data = yDataLine.value;
|
||||
option.xAxis.data = xData.value;
|
||||
setOptions(option);
|
||||
startAutoPlay({
|
||||
interval: 2000,
|
||||
seriesIndex: 0,
|
||||
showTooltip: true,
|
||||
});
|
||||
// startAutoPlay({
|
||||
// interval: 2000,
|
||||
// seriesIndex: 0,
|
||||
// showTooltip: true,
|
||||
// });
|
||||
getInstance()?.off('click', onClick);
|
||||
getInstance()?.on('click', onClick);
|
||||
}
|
||||
|
||||
@ -183,9 +183,7 @@ export default {
|
||||
const option = Object.assign(
|
||||
{
|
||||
tooltip: {
|
||||
// tooltip样式调整添加这个类名
|
||||
className: 'custom-tooltip-container', // 自定义父容器类名
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
borderColor: '#35d0c0',
|
||||
color: '#fff',
|
||||
position: function (point, params, dom, rect, size) {
|
||||
|
||||
@ -56,9 +56,8 @@ export default {
|
||||
zlevel: 1,
|
||||
name: '漏斗图',
|
||||
type: 'funnel',
|
||||
top: '11%',
|
||||
left: 'center',
|
||||
width: '25%',
|
||||
width: '28%',
|
||||
sort: 'ascending',
|
||||
gap: 0,
|
||||
label: {
|
||||
@ -67,51 +66,38 @@ export default {
|
||||
width: '200px',
|
||||
align: 'right',
|
||||
formatter: function (params) {
|
||||
if (!params.data.reaVal) return '';
|
||||
let arr = [`{a|${params.data.name}}`, `{b| ${params.data.reaVal}%}`];
|
||||
return arr.join('\n');
|
||||
// params.data.name + ':' + params.data.reaVal + '%'};
|
||||
},
|
||||
rich: {
|
||||
a: { color: '#fff', fontSize: '16px' },
|
||||
b: { color: '#05FCC6', fontSize: '16px', marginTop: '10px' },
|
||||
b: { color: '#05FCC6', fontSize: '16px' },
|
||||
},
|
||||
verticalAlign: 'middle',
|
||||
padding: [5, 6], // 增加标签内边距
|
||||
padding: [5, 10], // 增加标签内边距
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 10,
|
||||
length2: 50,
|
||||
length: 20,
|
||||
length2: 30,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
width: 2,
|
||||
color: '#ffffff',
|
||||
opacity: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
// 自定义折线路径（从标签到数据点的像素坐标）
|
||||
// 参数：idx-数据索引, params-包含标签位置信息的对象
|
||||
// formatter: function (idx, params) {
|
||||
// return [
|
||||
// [params.labelRect.x, params.labelRect.y], // 起点（标签位置）
|
||||
// [params.labelRect.x + 20, params.labelRect.y], // 水平线段
|
||||
// [params.labelRect.x + 20, params.dataCoord[1]] // 垂直线段
|
||||
// ];
|
||||
// },
|
||||
},
|
||||
// 添加第二段折线
|
||||
// markLine: {
|
||||
// symbol: 'none', // 隐藏端点
|
||||
// lineStyle: {
|
||||
// type: 'solid',
|
||||
// color: '#fff',
|
||||
// width: 1,
|
||||
// },
|
||||
// data: [
|
||||
// // 从默认 labelLine 的终点到自定义位置
|
||||
// [
|
||||
// {
|
||||
// coord: [50, 50], // 第一段线的终点（需动态计算）
|
||||
// name: 'Label1',
|
||||
// },
|
||||
// {
|
||||
// coord: [80, 50], // 第二段线的终点
|
||||
// name: 'Label1',
|
||||
// },
|
||||
// ],
|
||||
// ],
|
||||
// },
|
||||
itemStyle: {
|
||||
show: false,
|
||||
borderColor: '#fff',
|
||||
|
||||
@ -155,7 +155,7 @@ const handleCommand = (data) => {
|
||||
-webkit-background-clip: text;
|
||||
color: #fff;
|
||||
letter-spacing: 4px;
|
||||
text-shadow: -2px 0 10px #add8f1;
|
||||
text-shadow: -2px 0 0 1px #add8f1;
|
||||
width: 100%;
|
||||
padding: 0 36px 0 72px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -9,19 +9,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tooltip-container{
|
||||
border-radius: 8px !important;
|
||||
padding: 6px 16px 6px 8px !important;
|
||||
background-color: rgba(0,0,0,0.7) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
& span{
|
||||
width: 8px !important;
|
||||
height: 8px !important;
|
||||
vertical-align: middle;
|
||||
margin-top: -4px;
|
||||
}
|
||||
}
|
||||
.custom-echarts-tips {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@ -127,7 +127,7 @@ watch(
|
||||
width: 160px;
|
||||
margin: 0 auto;
|
||||
height: 32px;
|
||||
line-height: 26px;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
||||
@ -199,9 +199,7 @@ function getPie3D(pieData, internalDiameterRatio) {
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
// tooltip样式调整添加这个类名
|
||||
className: 'custom-tooltip-container', // 自定义父容器类名
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
borderColor: '#35d0c0',
|
||||
color: '#fff',
|
||||
position: function (point, params, dom, rect, size) {
|
||||
|
||||
@ -27,9 +27,7 @@ const state = reactive({
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
// tooltip样式调整添加这个类名
|
||||
className: 'custom-tooltip-container', // 自定义父容器类名
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
const params = data[0];
|
||||
|
||||
@ -30,9 +30,7 @@ const state = reactive({
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
// tooltip样式调整添加这个类名
|
||||
className: 'custom-tooltip-container', // 自定义父容器类名
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
const params = data[0];
|
||||
|
||||
@ -12,22 +12,22 @@ const data = ref([
|
||||
{
|
||||
name: ' 企业',
|
||||
value: 10.8,
|
||||
itemStyle: { color: '#5b7bc7', opacity: 0.8 },
|
||||
itemStyle: { color: '#3c5fc4', opacity: 0.8 },
|
||||
},
|
||||
{
|
||||
name: ' 合作社',
|
||||
value: 18.4,
|
||||
itemStyle: { color: '#8ed0f3', opacity: 0.8 },
|
||||
itemStyle: { color: '#8fd8ff', opacity: 0.8 },
|
||||
},
|
||||
{
|
||||
name: ' 村集体',
|
||||
value: 14.3,
|
||||
itemStyle: { color: '#65be97', opacity: 0.8 },
|
||||
itemStyle: { color: '#55d9a4', opacity: 0.8 },
|
||||
},
|
||||
{
|
||||
name: ' 个体',
|
||||
value: 23.7,
|
||||
itemStyle: { color: '#f0c94d', opacity: 0.8 },
|
||||
itemStyle: { color: '#d2a823', opacity: 0.8 },
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
@ -31,9 +31,7 @@ const state = reactive({
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
// tooltip样式调整添加这个类名
|
||||
className: 'custom-tooltip-container', // 自定义父容器类名
|
||||
backgroundColor: 'rgba(0,0,0,0.5);',
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
const params = data[0];
|
||||
|
||||
@ -22,7 +22,7 @@ const state = reactive({
|
||||
option: {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '1%',
|
||||
right: '10%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true,
|
||||
@ -33,9 +33,7 @@ const state = reactive({
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
// tooltip样式调整添加这个类名
|
||||
className: 'custom-tooltip-container', // 自定义父容器类名
|
||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||
borderColor: '#35d0c0',
|
||||
formatter: (data) => {
|
||||
console.log('data', data);
|
||||
@ -135,14 +133,14 @@ const state = reactive({
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
itemWidth: 12,
|
||||
itemHeight: 8,
|
||||
itemGap: 20,
|
||||
right: '2%',
|
||||
top: '3%',
|
||||
x: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
color: '#fff',
|
||||
},
|
||||
data: ['总产量（吨）', '平均产量（吨）'],
|
||||
@ -161,12 +159,12 @@ const state = reactive({
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(1,254,253,1)',
|
||||
color: 'rgba(53,208,192,1)',
|
||||
},
|
||||
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(1,254,253,0)',
|
||||
color: 'rgba(53,208,192,0)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
@ -185,18 +183,20 @@ const state = reactive({
|
||||
name: '平均产量（吨）',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
showSymbol: false,
|
||||
showSymbol: true,
|
||||
symbolSize: 8,
|
||||
smooth: false,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
max: 100,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#FEF906',
|
||||
color: 'rgba(53,208,192,1)',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FEF906',
|
||||
color: 'rgba(254,249,6,1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -216,14 +216,14 @@ const loadData = async (code = '') => {
|
||||
// });
|
||||
await sleep(500);
|
||||
state.data = [
|
||||
{ value: 103, value1: 102, name: '耿马镇' },
|
||||
{ value: 103, value1: 208, name: '耿马镇' },
|
||||
{ value: 72, value1: 157, name: '勐撒镇' },
|
||||
{ value: 50, value1: 125, name: '勐永镇' },
|
||||
{ value: 60, value1: 146, name: '孟定镇' },
|
||||
{ value: 40, value1: 86, name: '勐简乡' },
|
||||
{ value: 111, value1: 172, name: '贺派乡' },
|
||||
{ value: 81, value1: 180, name: '四排山乡' },
|
||||
{ value: 55, value1: 66, name: '芒洪乡' },
|
||||
{ value: 55, value1: 99, name: '芒洪乡' },
|
||||
{ value: 68, value1: 84, name: '大兴乡' },
|
||||
];
|
||||
};
|
||||
|
||||
@ -12,9 +12,9 @@
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const data = ref([
|
||||
{ value: 40, name: '一级', reaVal: '20', itemStyle: { color: '#56b1c0' } },
|
||||
{ value: 80, name: '二级', reaVal: '30', itemStyle: { color: '#77c8ca' } },
|
||||
{ value: 120, name: '三级', reaVal: '50', itemStyle: { color: '#7bb9cf' } },
|
||||
{ value: 40, name: '一级', reaVal: '20' },
|
||||
{ value: 80, name: '二级', reaVal: '30' },
|
||||
{ value: 120, name: '三级', reaVal: '50' },
|
||||
]);
|
||||
const option = reactive({});
|
||||
onMounted(() => {});
|
||||
|
||||
@ -121,14 +121,14 @@ const loadData = async () => {
|
||||
{ value: 20, name: '2025' },
|
||||
],
|
||||
third: [
|
||||
{ value: 98, value1: 88, name: '耿马镇' },
|
||||
{ value: 78, value1: 128, name: '耿马镇' },
|
||||
{ value: 55, value1: 117, name: '勐撒镇' },
|
||||
{ value: 65, value1: 145, name: '勐永镇' },
|
||||
{ value: 60, value1: 126, name: '孟定镇' },
|
||||
{ value: 40, value1: 86, name: '勐简乡' },
|
||||
{ value: 81, value1: 152, name: '贺派乡' },
|
||||
{ value: 41, value1: 130, name: '四排山乡' },
|
||||
{ value: 100, value1: 101, name: '芒洪乡' },
|
||||
{ value: 63, value1: 109, name: '芒洪乡' },
|
||||
{ value: 79, value1: 184, name: '大兴乡' },
|
||||
],
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user