为什么我的echarts字体样式这么丑？Echarts 柱状图、饼图等标签、字体、样式调整

在项目组做了两个月的echarts，曾经小白的我现在对echarts的使用也算是得心应手，现将个人这段时间的个人笔记奉上，供大家品鉴、参考！

1、option下调图形颜色，加： color: ['#ffd285','#ec4863', '#ff733f','#3AA6FF']

2、调节echarts背景色，在option下加：backgroundColor: "#404A59",

3、标题样式调节：

title: [{

text: '会议室饱和度',

left: '40%',

top: '6%',

textStyle: {

color: '#ffd285'

}

}]

4、调节echarts图形位置，在legend下加：

grid: {
left: '10%',
right: '5%',
top: '16%',
bottom: '6%',
containLabel: true
}

5、调节legend 标签的样式：

legend: {
x: '40%',
bottom: '90%',
textStyle: {
color: '#ffd285',
},
data: ['已办件数', '逾期数'],
textStyle: {
fontSize: 28 ,
color: '#3398DB'
}
}

6、调节X轴样式：

xAxis: {
type: 'category',
"axisLine": {
lineStyle: {
color: '#c0576d'
}
},
"axisTick": {
"show": false
},
axisLabel: {
textStyle: {
color: '#ffd285'
}
},
boundaryGap: true, //false时X轴从0开始
data: data_x,
axisLabel: {
show: true,
// rotate:-10,
interval:0,
textStyle: {
color: '#fff',
fontWeight:'bold',
fontSize:26
}
}
}

7、调节Y轴样式《一》：
yAxis: {
"axisLine": { //调节Y轴样式、颜色
lineStyle: {
color: '#c0576d'
}
},
splitLine: { //调节网格线样式、颜色
show: true,
lineStyle: {
color: '#c0576d'
}
},
"axisTick": {
"show": false
},
axisLabel: {
textStyle: {
color: '#ffd285'
}
},
type: 'value'

}

调节Y轴样式《二》：
{
type: 'value',
name: '统计',
min: 0,
max: 250,
interval: 50, //调节Y轴刻度
axisLabel: {
formatter: '{value} ml' //刻度单位
}
}

8、调节柱状图样式：

{
name: '已办件数',
smooth: true,
type: 'bar',
barWidth : 40,
symbolSize: 8,
// symbol: 'circle',
data: zbsl
}

9、echarts工具箱：

toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
}

10、饼图样式：
series : [
{

type: 'pie',
radius : '80%',
center: ['40%', '50%'],
textStyle: {
fontSize: '30',
fontWeight: 'bold'
},
data:pie_data,
label: {
normal: {
textStyle: {
fontSize: 25
}
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]

11、tooltip 格式拼法：（鼠标放在图例上面显示的样式）（饼图中间）

《一》: tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
}

《二》:
tooltip: {
trigger: 'item',
// formatter: "{a} <br/>{b} : {c} ({d}%)",
formatter: "{b} : {c} ({d}%)",
textStyle:{
fontSize:30
}
}

12、图例边缘的结构字体样式，展示结构，饼图为例：（饼图边缘）

series: [{
// name: chartdata[0].name,
type: 'pie',
label: {
normal: {
formatter: function(params) {
return params.percent + "%\n\n" + params.name;//饼图边缘显示的格式
},
textStyle:{
fontSize:30 //饼图边缘显示的字体大小
}
}
},
labelLine: {
normal: {
length: 40,
length2: 30,
lineStyle: {
color: '#ccc'
}
}
},
// data: chartdata[0].data
data:data1
}],

13、

为什么我的echarts字体样式这么丑？Echarts 柱状图、饼图等标签、字体、样式调整相关推荐

html怎么设置单选框样式,CSS - 如何设置所选单选按钮标签的样式？
qq_遁去的一_1 .radio-toolbar input[type="radio"] { display: none;}.radio-toolbar label { displ ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
点击li标签增加样式，并删除其它li标签样式
页面部分 <ul class="layui-nav layui-nav-tree" lay-filter="demo"><li class=& ...
Echarts —自定义label标签的样式(formatter，rich，添加图标等操作)
最近公司项目中在使用 Echarts 绘制图表时,由于默认的 label 标签不能满足设计稿需求,所以研究了对 label标签进行格式化的方案,了解到可以使用 formatter 内容格式器对标签内容 ...
echarts饼图 mouseover中间部分文字样式设置，默认显示总和
需求描述需求要求利用echarts的饼图对企业数量进行统计,要求默认饼图中间显示全部企业数量,鼠标移动上去,则显示对应部分的企业数量,并且设置样式. 效果图具体代码 let TrendCha ...
devexpress 中的checkboxlist怎么设置间距_HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
php css去除h1样式,HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解...
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
qt怎么设置标签背景图片_HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解...
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
CSS系列之美化网页/span标签和div标签/字体样式/文本样式
CSS系列之美化网页/span标签和div标签/字体样式/文本样式 01 span标签和div标签 span标签的作用能让几个文字或者某个词语凸显出来属于行内元素 div标签属于块级元素程序示 ...
CAD关于文字样式得到图所有文字对象使用的字体文件（com接口c#语言）
下面代码会遍历图上所有CAD文字对象,然后取它使用的字体信息 void getAllTextFont(){MxDrawDatabase database = (MxDrawDatabase)axMxD ...

为什么我的echarts字体样式这么丑？Echarts 柱状图、饼图等标签、字体、样式调整

为什么我的echarts字体样式这么丑？Echarts 柱状图、饼图等标签、字体、样式调整相关推荐

最新文章

热门文章

为什么我的echarts字体样式这么丑？Echarts 柱状图、饼图 等标签、字体、样式调整

为什么我的echarts字体样式这么丑？Echarts 柱状图、饼图 等标签、字体、样式调整相关推荐

最新文章

热门文章

为什么我的echarts字体样式这么丑？Echarts 柱状图、饼图等标签、字体、样式调整

为什么我的echarts字体样式这么丑？Echarts 柱状图、饼图等标签、字体、样式调整相关推荐