カスタム パイ チャート データの更新とカラー レンダリングの問題に関するエチャート

echartsカスタム円グラフを使用する場合Customized Pie、次の図に示すように、定義された動的データが原因で色をレンダリングできないという問題が発生します。

グラフの色は、次のようにitemStyle内のプロパティに基づいていますcolor。

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

グラフのデータを動的にレンダリングする、つまりoptionその中のデータを変更し、それを使用してmyChart.setOption(option);グラフを動的にレンダリングしますが、このとき、いくつかのグラフの色が白く、白い領域が固定されていないことがわかります. これは、設定、visualMap属性が視覚的なパフォーマンスを制約するために使用され、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]  // 物体的亮度范围
     }
 }

visualMapパラメータminは最低value値を表し、max最高value値を表します.上記のデータのうち、value最高値は範囲に達した759か、範囲を超えたので、明るさvisualMapの最大値maxとして設定されます.オブジェクトの最大明るさに達したとき、デフォルトで白くなります。ここで、上記の白いブロックの問題を修正する 2 つの方法があります。1.合計の値の範囲を修正します。 2.最大輝度値を修正します。colorLightness11

minmax
colorLightness

最小値と最大値の範囲を変更します

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

colorLightness の最大輝度値を変更します

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

最大値範囲のmin合計を変更することをお勧めしますmax。最大範囲内の値のみを取得します。最大輝度のみを変更すると、最大範囲を超える値は同じ色になります。

エラー報告の問題と最適化された解決策

この種のエラーは、echarts既に初期化されているために報告されます。アンロードされたインスタンスが再度初期化されると、エラーが報告されます。この種のインスタンスは、一度だけインスタンス化する必要があります。初期化はグローバル変数として定義されておりecharts、onMountedグローバル呼び出しで 1 回だけインスタンス化できます。echarts.init(domNode.value).dispose()インスタンスの破棄とmyChart.clear()クリアも使用できます。

---

この記事が役に立ったと思われる場合は、いいね、ブックマーク、転送をお願いします~