사용자 지정 원형 차트 데이터 새로 고침 및 색상 렌더링 문제에 대한 echarts

echarts사용자 지정 원형 차트를 사용하는 경우 Customized Pie정의된 동적 데이터로 인해 다음 그림과 같이 색상을 렌더링할 수 없는 문제가 발생합니다.

차트의 색상은 다음과 같이 itemStyle내부 속성을 기반으로 합니다.color

itemStyle: {
    
    
     color: '#4d90fe',  /* 图表的颜色 */
     shadowBlur: 200,
     shadowColor: 'rgba(0, 0, 0, 0.5)'
}

차트의 데이터를 동적으로 렌더링, 즉 option그 안의 데이터를 변경 myChart.setOption(option);하여 동적으로 차트를 렌더링하는데 사용하는데, 이때 일부 차트의 색상이 흰색이고 흰색 영역이 고정되어 있지 않은 것으로 확인됨 .설정, visualMapAttributes는 시각적 성능을 제한하는 데 사용되며 data시각적 제한을 수행하기 위해 전달되는 데이터이기 때문입니다.구체적인 데이터는 다음과 같습니다.

// 图表数据
const data = reactive([
    {
    
     value: 486, name: '湖北' },
    {
    
     value: 438, name: '湖南' },
    {
    
     value: 574, name: '浙江' },
    {
    
     value: 732, name: '广东' },
    {
    
     value: 651, name: '上海' },
    {
    
     value: 759, name: '北京' }
])

// echarts的option属性
 visualMap: {
    
    
     show: false,   // 是否显示色轮
     min: 80,  // 最小值
     max: 600,  // 最大值
     inRange: {
    
       
        colorLightness: [0, 1]  // 物体的亮度范围
     }
 }

visualMapParameter min는 가장 낮은 value값을 나타내고, max가장 높은 value값을 나타내며, 위의 데이터 중 value가장 높은 값이 범위에 도달했거나 범위를 759초과하여 밝기 visualMap의 최대 값 max으로 설정됩니다. , 기본적으로 흰색으로 바뀝니다. 여기서 우리는 위의 화이트 블록 문제를 수정하는 두 가지 방법을 가질 수 있습니다. 1. 합의 값 범위 수정 2. 최대 밝기 값 수정colorLightness11

minmax
colorLightness

최소 및 최대 값 범위 수정

min: 0,  // 最小值
max: 1000,  // 最大值

colorLightness의 최대 밝기 값 수정

colorLightness: [0, 0.8]  // 物体的亮度范围

최대값 범위의 min합계를 수정하는 것이 좋습니다 max. 최대 범위 내의 값만 가져옵니다. 최대 밝기만 수정하면 최대 범위를 초과하는 값은 동일한 색상을 갖게 됩니다.

일부 오류 보고 문제 및 최적화된 솔루션

이러한 종류의 인스턴스는 echarts이미 초기화되었기 때문에 보고되고 언로드된 인스턴스를 다시 초기화하면 오류가 보고됩니다 이러한 종류의 인스턴스는 한 번만 인스턴스화하면 됩니다 초기화는 echarts전역 변수로 정의되며 onMounted전역 호출에서 한 번만 인스턴스화됩니다. echarts.init(domNode.value).dispose()Destroy 및 myChart.clear()clear 인스턴스 도 사용할 수 있습니다 .

---

이 글이 도움이 되셨다면 좋아요, 북마크, 포워드 부탁드립니다~