React 配合echarts使用問題記錄

1.React中引入Echarts

// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
// 引入餅狀圖
import  'echarts/lib/chart/pie';
// 引入提示框和標題組件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

2.react頁面配置

componentDidMount() {
        // 基於准備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('todayCustomerNum'));
        // 繪制圖表
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: ""
            },
            series: [
                {
                    name:'訪問來源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    hoverAnimation:false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,

                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    color: ['#32A8FF'],
                    data:[{value:5,name:'潛客數',itemStyle:{
                            normal:{
                                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ //顏色漸變函數 前四個參數分別表示四個位置依次為左、下、右、上

                                    offset: 0,
                                    color: '#4ab2d8'
                                },{
                                    offset: 1,
                                    color: '#4cd4bc'
                                }])
                            }
                        }}]
                }
            ]
        });
    }

3.阻止餅狀圖hover變大效果

　　在series屬性下設置 hoverAnimation:false

4.餅狀圖圓環設置寬度

　　在series屬性下設置 radius: ['70%','60%'],

　　百分比值越接近圓環越窄

5.legend設置不顯示問題

　　1.legend data屬性內部name與 series內 name對應

　　2.legend引入　

import 'echarts/lib/component/legend';

 

6.柵格線屬性設置

　　在xAxis 與 yAxis 內設置splitLine屬性

splitLine:{
    lineStyle: {
       color: '#3e485d',
       type: 'dashed',
       width: 1,
    }
}

7.react內legend設置icon圖片路徑

import home_ic_tit from '../../../../static/images/home_ic_tit.png';

legend: {
                    x:'right',
                    y:'top',
                    itemGap: 10,
                    padding: 20,    // [5, 10, 15, 20]
                    data:[ {name: '成交',
                        icon : 'image://'+home_ic_tit,
                        textStyle:{color:"#7b889d"}
                    }, {name:'預購',
                        icon : 'circle',
                            textStyle:{color:"#7b889d"}
                    }],

                },