极客观点
项目管理
HarmonyOS
怎么把这个绿色的圆点变小又不影响我的指示线的白色圆圈
data:[
{
"name": "1月",
"value": 286
},
{
"name": "2月",
"value": 294
},
{
"name": "3月",
"value": 342
},
{
"name": "4月",
"value": 315
},
{
"name": "5月",
"value": 259
},
{
"name": "6月",
"value": 444
},
{
"name": "7月",
"value": 408
},
{
"name": "8月",
"value": 307
},
{
"name": "9月",
"value": 325
},
{
"name": "10月",
"value": 411
},
{
"name": "11月",
"value": 0
},
{
"name": "12月",
"value": 0
}
]传进去的data:[
{
"name": "1月",
"value": 286
},
{
"name": "2月",
"value": 294
},
{
"name": "3月",
"value": 342
},
{
"name": "4月",
"value": 315
},
{
"name": "5月",
"value": 259
},
{
"name": "6月",
"value": 444
},
{
"name": "7月",
"value": 408
},
{
"name": "8月",
"value": 307
},
{
"name": "9月",
"value": 325
},
{
"name": "10月",
"value": 411
},
{
"name": "11月",
"value": 0
},
{
"name": "12月",
"value": 0
}
]
import React, { memo, useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import styles from './index.less';
import useInterval from '@/hook/useInterval';
interface IProps {
data: any;
width: string;
height: string;
unit: string;
color: string;
colors: string;
colorItemList?: any[];
onChangeValue?: (index: number) => void;
}
const color1s = ['#A4FFAE', '#7498FF'];
const color2s = [
{ start: '#B1FFB9', end: '#6EFF7D' },
{ start: '#98B7FF', end: '#5B8DFF' },
];
const BzLine: React.FC<IProps> = (props) => {
const {
width,
height,
data,
unit,
colors,
color,
colorItemList = color2s,
onChangeValue,
} = props;
const chartRef = useRef<HTMLDivElement>(null);
var chartInstance = useRef<echarts.ECharts>(null);
const [currentIndex, setCurrentIndex] = useState<number>(-1);
const [isBool, setIsBool] = useState<boolean>(true);
const [isBoolsyboolSize, setisBoolsyboolSize] = useState<any>(6);
const optionData: any = {
hoverLayerThreshold: 300,
grid: {
top: 30,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0, 14, 24, 0.65)',
borderRadius: 4,
borderWidth: 0, borderColor: 'rgba(0, 14, 24, 0.65)',
textStyle: {
color: '#FFFFFF',
lineHeigt: 16,
fontSize: 16,
fontFamily: 'AlibabaPuHuiTi-2-65-Medium',
align: 'left',
},
axisPointer: {// 坐标轴指示器
show: true,
lineStyle: {
type: 'solid',
width: 2,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FFFFFF00', // 0% 处的颜色
},
{
offset: 1,
color: '#FFFFFF', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
padding: [8, 8],
formatter: (params: any) => {
console.log('测试轮播',params[0].dataIndex)
setisBoolsyboolSize(20)
// optionData.series[0].symbolSize=20
let name = params[0].name;
let value = params?.[0]?.data;
value = !isNaN(value) ? Number(value) : 0;
if (value > 1000) {
value = value.toLocaleString();
}
// return `
// <div style="font-size: 16px; font-weight: 600;">${name}：<span style="color: #EFFFAD">${value}</span>${unit}</div>
// `;
return `
<div style="display: flex;align-items: center;color: #FFFFFF;font-size: 16px; font-weight:normal;font-family: 'AlibabaPuHuiTi-2-65-Medium';">${name}：<span style="color: #FFF0AD;font-size: 18px; font-style: normal; font-family: 'AlibabaPuHuiTi-2-85-Bold';">${value}</span>${unit}</div>
`;
},
// textStyle: {
// color: '#FFFFFF',
// fontSize: 12,
// align: 'left',
// },
},
xAxis: {
axisLabel: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 18,
lineHeight: 19,
fontFamily: 'AlibabaPuHuiTi-2-75-SemiBold',
interval: 0,
},
axisLine: {
lineStyle: {
color: 'rgba(205, 205, 205)',
width: 1.7,
}
},
axisTick: {
show: false,
},
data: data.map((item: any) => item.name),
},
yAxis: {
type: 'value',
name: unit,
axisLabel: {
color: 'rgba(255, 255, 255, 1)',
fontSize: 18,
lineHeight: 19,
fontFamily: 'AlibabaPuHuiTi-2-65-Medium',
opacity: 0.8,
},
// smooth: false,
// showSymbol: false,
// // symbolSize: 2,
// symbol: 'circle',
// emphasis: {
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.5,
// colorStops: [
// {
// offset: 0,
// color: '#fff', // 中心颜色
// },
// {
// offset: 0.4,
// color: '#fff',
// },
// {
// offset: 0.5,
// color: '#ffffff00',
// },
// {
// offset: 1,
// color: '#ffffff00',
// },
// ],
// },
// borderColor: '#FFFFFF',
// borderWidth: 1,
// },
// },
nameGap: 10,//nameGap 属性来设置与 y 轴的距离
nameTextStyle: {
color: 'rgba(255, 255, 255,1)',
fontSize: 18,
fontFamily: 'AlibabaPuHuiTi-2-75-SemiBold',
lineHeight: 21,
align: 'right',
padding: [0, 5, 0, 0],
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: 'rgba(205, 205, 205, 0.2)',
type: 'dashed',
width: 1.7,
}
}
},
series: [
{
name: '重点项目',
type: 'line',
smooth: false,
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: colors // 0% 处的颜色
}, {
offset: 0.5, color: color // 0% 处的颜色
}, {
offset: 1, color: colors // 0% 处的颜色
}],
global: false // 缺省为 false
}
},
symbol: 'circle',
// symbolSize: [2, 2],
itemStyle: {
color: 'rgba(91, 167, 255, 1)',
borderColor: 'rgba(150, 180, 214, 0.57)',
borderWidth: 1,
},
symbolSize:18,
showSymbol: true,
emphasis: {
symbolSize: 36,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: '#fff', // 中心颜色
},
{
offset: 0.4,
color: '#fff',
},
{
offset: 0.5,
color: '#ffffff00',
},
{
offset: 1,
color: '#ffffff00',
},
],
},
borderColor: '#FFFFFF',
borderWidth:1,
},
},
data: data.map((item: any) => item.value),
},
],
};
useEffect(() => {
const { current } = chartRef;
if (current) {
const LineChartIns = echarts.getInstanceByDom(current);
if (LineChartIns) {
data.map((item: any, index: number) => {
LineChartIns.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: index
});
})
LineChartIns.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex,
});
}
}
}, [currentIndex]);
const renderChart = (option: any) => {
if (chartRef && chartRef.current) {
chartInstance.current = echarts.init(chartRef.current);
chartInstance.current.setOption(option);
// var options =chartInstance.current.getOption().series[0].symbolSize ; // 获取echarts的配置项
// // var symbolSize = options.series[0].data[0].symbolSize; // 获取第一个数据点的symbolSize
// console.log(options); // 输出：10
setCurrentIndex(0);
}
};
useEffect(() => {
renderChart(optionData);
return () => {
chartInstance && chartInstance.current!.dispose();
};
}, [data]);
useInterval(
() => {
setCurrentIndex(currentIndex + 1 === data.length ? 0 : currentIndex + 1);
},
3000,
isBool,
);
return (
<div
style={{ width: width || '110px', height: height || '110px' }}
className={styles.chart}
ref={chartRef}
onMouseEnter={() => {
setIsBool(false);
}}
onMouseLeave={() => {
setIsBool(true);
}}
/>
);
};
export default memo(BzLine);
不是修改
emphasis.symbolSize而是修改emphasis.scale：#series-line.emphasis.scale - Documentation - Apache ECharts