echarts框架创建各种图表

主要是设置各种样式

• normal为正常显示，emphasis为高亮状态下的显示
• label是显示的文字等信息
• labelline是连接提示框的飞线
• color用来设置颜色，对于字体可以在label里面的textStyle中单独设置

                var showValueStyle = {
                    normal: {
                        color: fontColor,    //图形的颜色
                        label: {
                            show: true,      //显示信息
                            position: 'center',
                            textStyle: {     //单独设置字体格式
                                color: 'black',
                                fontWeight: 'bold',
                                fontSize: '14'
                            }
                        },
                        labelLine: {
                            show: false
                        }
                    },
                    emphasis: {
                        color: fontColor,
                        label: {
                            show: true,
                            position: 'center',
                            textStyle: {
                                color: 'black',
                                fontWeight: 'bold',
                                fontSize: '14'
                            }
                        },
                        labelLine: {
                            show: false
                        }
                    }
                };

• 为了代码复用，前面把格式单独定义，然后后面可以调用

            //初始化工作节点数饼图
            var domWorkMonitor = document.getElementById("workPieMonitor");
            $scope.myWorkChartMonitor = echarts.init(domWorkMonitor);
            $scope.workPieOptionMonitor = {
                tooltip: {        //定义提示框
                    show: false
                },
                series: [        
                    {
                        name:'工作节点数',
                        type:'pie',       //图形类型
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: true,
                        //每个扇形的颜色
                        data:[
                            {   //name是用来显示在图形中的，然后调用了定义好的样式
                                value: workNodeCount,
                                name: '在线数'+' '+workNodeCount,
                                itemStyle: getValueColorStyle('#0066FF')
                            },
                            {
                                value: (cluster.configNodeCount-cluster.nodeCount),
                                name: '',
                                itemStyle: hideValueStyle
                            }
                        ]
                    }
                ]
            };
            if ($scope.workPieOptionMonitor && typeof $scope.workPieOptionMonitor === "object") {
                $scope.myWorkChartMonitor.setOption($scope.workPieOptionMonitor, true);
            }

• 总的来说需要设置字体的都要放在label里面，设置其他的与label同级，放在normal或者emphasis里面
• 参考下面的模板，不要弄错级别，否则不会起作用。

var myStyle = {
    normal：{
        color：
            show:
            formatter：
            position:
            textStyle：{
                color:
                font:
                ...
            }       
        },
        emphasis：{
        color：
            show:
            formatter：
            position:
            textStyle：{
                color:
                font:
                ...
            }
        }
    }