echarts框架创建各种图表

来源：互联网发布：乐天软件编辑：程序博客网时间：2024/05/23 02:07

主要是设置各种样式

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:                ...            }        }    }

0 0