echart样式修改记录

原创 周美娜 随笔 待整理 201阅读 2018-06-07 15:33:53 举报

1》 柱状图,bar宽度修改 barWidth : 30
https://www.cnblogs.com/hwaggLee/p/4762410.html
2.》bar 变成圆角
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
//顶部数字展示pzr
itemStyle: {
//柱形图圆角,鼠标移上去效果
emphasis: {
barBorderRadius: [10, 10, 10, 10]
},

                    normal: {
                        //柱形图圆角,初始化效果
                        barBorderRadius:[10, 10, 10, 10]
                    }
                },
            }
        ]

https://zhidao.baidu.com/question/748835493128466292.html
https://blog.csdn.net/flygoa/article/details/52922468
3》echart 如何不显示刻度线
xAxis : [
{
type: 'value',
show: false,
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
show: false,
data : ['客户端','微博','微信','报刊','网页','论坛']
}
]
https://blog.csdn.net/qq_31135027/article/details/79614425
4》去掉坐标轴刻度线
yAxis: {
axisTick: {
show: false
}
}

5》不同数据点的独立配色
https://www.cnblogs.com/spring_wang/p/4112691.html

6》echart圆饼图,显示内容字体及大小
series : [
{
name:'公里总里程',
type:'pie',
radius : '70%',//饼图的半径大小
center: ['60%', '60%'],//饼图的位置
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 16 //文字的字体大小
},
formatter:'{d}%'

                        }
                    },
                data:[  
                    {value:50,name:'高速50KM',itemStyle:{normal:{color:'#FE0000'}}},  
                    {value:150,name:'一级150KM',itemStyle:{normal:{color:'#F29700'}}},  
                    {value:150,name:'二级150KM',itemStyle:{normal:{color:'#02B0ED'}}}, 
                    {value:100,name:'三级100KM',itemStyle:{normal:{color:'#55E87D'}}},
                    {value:50,name:'四级50KM',itemStyle:{normal:{color:'#FFE200'}}},
                ]
            }  
        ] 

https://www.cnblogs.com/congyu/p/8028290.html
7》Echart饼图去掉Labelline标示线和label文字
itemStyle : {
normal: {
label: {
show false
} ,
labelLine:{
show:false
}
}
}
https://www.cnblogs.com/taoxingyu/p/7867469.html

8》饼图设置指示线的长度
https://blog.csdn.net/n_meng/article/details/74537731
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}

9》echarts x轴或y轴文本字体颜色改变
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
}
https://www.cnblogs.com/cocozj945/p/6268460.html

10》echart图例(legend)的位置
https://blog.csdn.net/qq_31135027/article/details/79612966

11》ECharts图例组件配置 控制图例组件的位置和宽高 w3Cshool 文档
https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-2dbe2cgw.html
12》如何修改x轴和y轴的颜色
https://blog.csdn.net/flygoa/article/details/52922266
13》去掉X轴、Y轴和网格线
https://blog.csdn.net/you23hai45/article/details/51569690
14》柱状图 ,颜色和显示设置并设置折线的颜色
https://www.cnblogs.com/wsir/p/6236124.html
https://www.cnblogs.com/webtall/p/7238593.html
15》修改图例legend颜色
color:['#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'], //手动设置每个图例的颜色
legend: { //图例组件
right:68, //图例组件离右边的距离
orient : 'vertical', //布局 纵向布局
width:40, //图行例组件的宽度,默认自适应
x : 'right', //图例显示在右边
itemWidth:10, //图例标记的图形宽度
itemHeight:10, //图例标记的图形高度
data:['30%','10%','15%','20%','25%'],
textStyle:{ //图例文字的样式
color:'#333',
fontSize:12
}
}
16》Echarts中axislabel文字过长导致显示不全或重叠
grid: { // 控制图的大小,调整下面这些值就可以,
50 x: 40,
51 x2: 100,
52 y2: 150// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
53 }
以及 width 和 height 设置 有关系
https://www.cnblogs.com/liubeimeng/p/4980067.html
17》boundaryGap具体含义
https://segmentfault.com/q/1010000009880862/a-1020000010020365

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复