React 配合echarts使用问题记录

// 引入 ECharts 主模块
import echarts from ‘echarts/lib/echarts‘;
// 引入饼状图
import  ‘echarts/lib/chart/pie‘;
// 引入提示框和标题组件
import ‘echarts/lib/component/tooltip‘;
import ‘echarts/lib/component/title‘;

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,[{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

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