echart图形设计

超、凢脫俗 2022-04-17 02:14 258阅读 0赞

1.柱形图设计

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70][]

option= {
                color: ['#00AEFF','#00699A','#fed61c'],
              backgroundColor: '#2A456B',//背景色
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                title: {
                    text: '验船师人员缺口统计图',
                    x : '20px' ,
                    y:'-1px',
                    textStyle: {
                        fontSize: 20,
                        fontWeight: 'bolder',
                        color: '#FFF'          // 主标题文字颜色
                    },
    
                }
                ,
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis :
                {
                    type : 'category',
                    boundaryGap : true,
                    data : ["船体","机电","其它"],
    
                    axisLine:{
                        lineStyle:{
                            color:'#00C6FF',
                            width:1,//这里是为了突出显示加上的
    
                        }
                    }
                }
                ,
                yAxis :
                {
                    name:'人',
                    type : 'value',
                    axisLine:{
                        lineStyle:{
                            color:'#00C6FF',
                            width:1,//这里是为了突出显示加上的
                        }
                    }
                }
                ,
                series : [
                    {
                        type:'bar',
                        barWidth:40,
                        stack: '验船师学历',
                        data:[23,34,45]
                    }
    
                ]
    
    
            }

2.echart - 饼图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 1][]

app.title = '嵌套环形图';
 
 option = {
 color: ['#ED3F49','#00AEFF','#00699A','#FED61c','rgba(64, 82, 114, 0.6)','#405272'],
 backgroundColor: '#2A456B',//背景色
 tooltip: {
 trigger: 'none',
 // trigger: 'item',
 formatter: "{a} {b}: {c} ({d}%)"
 },
 title: {
 text: '验船师类别',
 x : '20px' ,
 y:'-1px',
 textStyle: {
 fontSize: 20,
 fontWeight: 'bolder',
 color: '#FFF' // 主标题文字颜色
 },
 
 },
 legend: {
 orient: 'vertical',
 left: 'left',
 textStyle: {
 color: '#00C6FF' // 图例文字颜色
 }, 
 y: 'bottom', 
 data: ['验船员','助理验船师','中级验船师','高级验船师']
 },
 series: [
 {
 name:'访问来源',
 type:'pie',
 selectedMode: 'single',
 radius: [0, '30%'],
 
 label: {
 normal: {
 position: 'outer'
 }
 },
 labelLine: {
 normal: {
 show: true
 }
 },
 data:[
 {value:2646, name:'验船员',selected:true},
 {value:3036, name:'助理验船师'},
 {value:895, name:'中级验船师'},
 {value:251, name:'高级验船师'}
 
 ]
 ,
 itemStyle: {
 normal: {
 // color: '各异',
 borderColor: '#405272',
 borderWidth: 1,
 label: {
 show: true,
 position: 'outer',
 formatter: '{b} \n {c} ({d}%)'
 
 // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
 ,textStyle:{
 fontSize:16 
 }
 },
 labelLine: {
 show: true,
 length: 50,
 lineStyle: {
 // color: '各异',
 width: 2,
 type: 'solid'
 }
 }
 },
 emphasis: {
 // color: 各异,
 borderColor: '#405272',
 borderWidth: 2,//鼠标移动上去的宽度
 label: {
 show: true,
 position: 'outer'
 // textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
 },
 labelLine: {
 show: true,
 length: 1,
 lineStyle: {
 // color: 各异,
 width: 1, 鼠标移动上线的宽度
 type: 'solid'
 }
 }
 }
 }
 }
 
 ,
 //外侧圆圈设置
 {
 name:'外侧圆圈设置',
 type:'pie',
 radius: ['34%', '43%'],
 data:[
 {value:788, name:''}
 ],
 labelLine: {
 normal: {
 show: false
 }
 },
 tooltip: {
 trigger: 'none',
 },
 itemStyle: {
 normal: {
 //设置透明色
 borderColor: 'rgba(97, 117, 137, 0.1)',//#405272
 borderWidth: 7,
 
 
 },
 emphasis: {
 
 }
 
 }
 }
 ]
 };

3.折线图-多条echart

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 2][]

option = {
 color: ['#00FCD1','#02B4F7','#0083A3'],
 backgroundColor: '#2A456B',//背景色
 title: {
 text: '堆叠区域图',
 x : '20px' ,
 y:'-5px',
 textStyle: {
 fontSize: 20,
 fontWeight: 'bolder',
 color: '#FFF' // 主标题文字颜色
 },
 
 },
 
 tooltip : {
 /* trigger: 'axis',
 axisPointer: {
 type: 'cross',
 label: {
 backgroundColor: '#6a7985'
 }
 },*/
 
 trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
 showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
 hideDelay: 100, // 隐藏延迟，单位ms
 transitionDuration : 0.4, // 动画变换时间，单位s
 // 提示内边距，单位px，默认各方向内边距为5，
 // formatter: '{a} : {c} ' , // 接受数组分别设定上右下左边距，同css
 formatter:function(a) { 
 var relVal = ''; 
 for(var i in a){
 var domain=a[i] ;
 relVal +=domain.seriesName+ ' : '+domain.value+' '; 
 }
 //relVal =a[0].seriesName+ ' : '+a[0].value+' '; 
 // relVal += a[1]+'°C'; 
 return relVal; 
 } ,
 
 axisPointer : { // 坐标轴指示器，坐标轴触发有效
 type : 'line', // 默认为直线，可选为：'line' | 'shadow'
 lineStyle : { // 直线指示器样式设置
 color: '#FAFB02',
 width: 1,
 type: 'dashed'
 },
 shadowStyle : { // 阴影指示器样式设置
 width: 'auto', // 阴影大小
 color: 'rgba(150,150,150,0.3)' // 阴影颜色
 }
 },
 textStyle: {
 color: '#fff'
 }
 },
 //图例设置
 legend: {
 data:['邮件营销','联盟广告'],
 textStyle: {
 color: '#00C6FF' // 图例文字颜色
 }, 
 x: 'center', 
 y: '20px', 
 
 },
 toolbox: {
 feature: {
 saveAsImage: {}
 }
 },
 grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
 },
 xAxis : 
 {
 type : 'category',
 boundaryGap : false,
 data : ['周一','周二','周三','周四','周五','周六','周日'] ,
 axisLabel:{ 
 interval:0,//横轴信息全部显示 
 // rotate:-30,//-30度角倾斜显示 
 }, 
 axisLine:{ 
 lineStyle:{ 
 color:'#00C6FF', 
 width:1,//这里是为了突出显示加上的 
 
 } 
 } 
 }
 ,
 yAxis : 
 {
 type : 'value',
 axisLine:{ 
 lineStyle:{ 
 color:'#00C6FF', 
 width:1,//这里是为了突出显示加上的 
 } 
 } 
 }
 ,
 series : [
 {
 name:'邮件营销',
 type:'line',
 //stack: '总量',
 symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
 symbolSize: 8,//圈的大小
 areaStyle: {normal: {
 areaStyle: {
 // todo:区域图，纵向渐变填充
 /* color: function(params) {
 // for bar
 var zrColor =require('zrender/tool/color');
 return zrColor.getLinearGradient(
 0, 2000, 0, 400,
 [[0, '#00FCD1'], [0.5, 'red']]
 )
 }*/
 }
 }},
 /* markPoint : {
 data : [
 {type : 'max', name: '最大值'}
 
 ]
 },*/
 //线的样式 
 itemStyle: {
 /* normal: {
 color: 'red',
 lineStyle: { // 系列级个性化折线样式
 width: 1,
 type: 'dashed'
 }
 },*/
 emphasis: {
 color: '#ffff00',//黄色
 symbolSize: 28,
 borderColor: '#f9f900',
 borderWidth: 4,
 shadowBlur: 10,
 shadowColor: '#333'
 }
 },
 /* label: {
 normal: {
 show: false
 },
 emphasis: {
 show: false
 }
 },*/
 data:[120,132, 101, 134, 90, 230, 210],
 /*{value:132,symbolSize:20}*/
 
 },
 {
 name:'联盟广告',
 type:'line',
 areaStyle: {normal: {}},
 data:[220, 182, 191, 234, 290, 330, 310],
 symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
 symbolSize: 8,//圈的大小
 areaStyle: {normal: {
 areaStyle: {
 }
 }}, itemStyle: {
 
 emphasis: {
 color: '#ffff00',//黄色
 symbolSize: 28,
 borderColor: '#f9f900',
 borderWidth: 4,
 shadowBlur: 10,
 shadowColor: '#333'
 }
 },
 }
 ]
 };

4.折线图-检验机构-近5年检验工作完成率

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 3][]

option = {
 color: ['#02B4F7','#0083A3','#00FCD1'],
 backgroundColor: '#2A456B',//背景色
 title: {
 text: '近5年检验工作完成率',
 x : '20px' ,
 y:'-1px',
 textStyle: {
 fontSize: 20,
 fontWeight: 'bolder',
 color: '#FFF' // 主标题文字颜色
 }
 },
 tooltip : {
 trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
 showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
 hideDelay: 100, // 隐藏延迟，单位ms
 transitionDuration : 0.4, // 动画变换时间，单位s
 formatter:function(a) {
 var relVal = '';
 for(var i in a){
 console.log(i)
 if(i<2){
 var domain=a[i] ;
 relVal +=domain.seriesName+ ' : '+domain.value+' ';
 }
 }
 //relVal =a[0].seriesName+ ' : '+a[0].value+' ';
 // relVal += a[1]+'°C';
 return relVal;
 } ,
 
 axisPointer : { // 坐标轴指示器，坐标轴触发有效
 type : 'line', // 默认为直线，可选为：'line' | 'shadow'
 lineStyle : { // 直线指示器样式设置
 color: '#FAFB02',
 width: 1,
 type: 'dashed'
 },
 shadowStyle : { // 阴影指示器样式设置
 width: 'auto', // 阴影大小
 color: 'rgba(150,150,150,0.3)' // 阴影颜色
 }
 },
 textStyle: {
 color: '#fff'
 }
 },
 
 toolbox: {
 feature: {
 saveAsImage: {}
 }
 },
 grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
 },
 xAxis : {
 
 type : 'category',
 boundaryGap : false,
 data :['2012','2013','2014','2015','2016'] ,
 axisLabel:{
 interval:0//横轴信息全部显示
 
 },
 axisLine:{
 lineStyle:{
 color:'#00C6FF',
 width:1
 
 }
 }
 }
 ,
 
 yAxis :
 {
 name:"（%）",
 color:'#ffff00',
 type : 'value',
 axisLine:{
 lineStyle:{
 color:'#00C6FF',
 width:1//这里是为了突出显示加上的
 }
 }
 }
 ,
 series : [
 {
 name:'工作完成率',
 type:'line',
 //stack: '总量',
 symbol:'emptycircle', //设置折线图中表示每个坐标点的符号；emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
 symbolSize: 8,//圈的大小
 areaStyle: {normal: {
 areaStyle: {
 
 }
 }},
 //线的样式
 itemStyle: {
 emphasis: {
 color: '#ffff00',//黄色
 symbolSize: 28,
 borderColor: '#f9f900',
 borderWidth: 4,
 shadowBlur: 10,
 shadowColor: '#333'
 }
 },
 
 data:[43,54,56,78,88]
 }]
 
 
 };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70]: /images/20220417/4ff4d50cbe98471792c9eaa2d79bbfe9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 1]: /images/20220417/78d85860a1c8452e9f18cf9b4d350487.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 2]: /images/20220417/20abd100cae842e28783cd66e42b944f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70 3]: /images/20220417/14e2e078834e4ce8a6d3238793aec635.png