修改echarts图表的一些样式：

大家好，欢迎来到IT知识分享网。

标题开始：

先看效果图：

因为大多数标题颜色以灰色出场，但如果背景颜色是深色系，那么你的字会很不清楚，下面就修改字体颜色：
上代码：

将legend中原本的data data：["B1F"，"B2F","总"] 改为里面对象的形式设置颜色： 当然也可以加些图形例如： icon : 'roundRect', data: [ { 
    name: "B1F", //图形 // icon : 'roundRect', textStyle: { 
    color: "#91B0CA", // 图例文字颜色 }, }, { 
    name: "B2F", textStyle: { 
    color: "#91B0CA", // 图例文字颜色 }, }, { 
    name: "总", textStyle: { 
    color: "#91B0CA", // 图例文字颜色 }, }, ], 

标题内部图行样式：

先看效果：

上代码：

legend: { 
    itemHeight: 24, itemWidth: 24, data: [ { 
    name: '修边比例', icon: 'rect', }, { 
    name: '平均门幅', icon: 'rect', } ] }, 

下面看一些基本样式：

circle 圆形
rect 矩形
roundRect 圆角矩形
triangle 三角形
diamond 菱形
pin 水滴
arrow 箭头
none 不显示图标

图形颜色：

例如：设置柱状图的宽度以及颜色（这里以渐变色举例，普通颜色就直接color就行）
效果图：（这里分为三个渐变色堆在一起，我拿一个出来举例）

上代码：

series：[ { 
    barWidth: 6, //柱图宽度 //柱状图渐变色 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { 
    offset: 0, color: "#59DEDD", }, { 
    offset: 1, color: "#EEFAFB", }, ]), } ] 

字体样式及显示

还有一些就是柱状图x轴字体很多显示不完全：
一般就：
换行
隔一个换行
竖直显示
倾斜
因为我一般用倾斜，样式好看，也不至于像竖直那样那么长
效果图：

直接上代码：

// 只需要xAxis中加入rotate倾斜 xAxis:{ 
    axisLabel: { 
    // 改变字体大小 fontSize: this.$utils.setFontSize(0.11), //改变字体粗细 fontWeight: 100, //改变字体颜色 color: "#ffffff", //改变间距 margin: 15, //这是步长 不设置就是0 也可以进行自己想要的设置，按需求了 interval: 0, // 设置字体倾斜 rotate: "45", }, } 

x轴与y轴颜色

改变x轴与y轴的颜色：
效果图：

上代码：
直接在xAixs中添加：

 axisLine: { 
    // 改变x轴颜色 lineStyle: { 
    color: ["hsla(229, 5%, 42%, 1)"], }, }, 

y轴同理

饼图字体样式：

效果图：

字体左对齐：
看代码：

label: { 
    normal: { 
    formatter: "{font|{b}}\n{hr|}\n{font|{c}台}", rich: { 
    font: { 
    align:"left",//设置字体左对齐 fontSize: 16,//设置字体大小 padding: [5, 0], color: "#BDD3ED",//设置字体颜色 }, 这里解释一下，hr是文字和数字中间的线，这里我把他取消了 hr: { 
    height: 0,// // borderWidth: 1,//控制线的厚度 width: "100%", align:"left", borderColor: "#fff",//线颜色 }, }, }, }, 

散点图提示文字：

老规矩：先看效果

代码在此：

//找到series中的label label:{ 
    show:true,//显示文字 formatter:"2000",//数值是几就显示几 里面可以接受字符付模板和回调函数 } //如果想要修改内容样式  // 在label中使用 rich修改 label: { 
    // 在文本中，可以对部分文本采用 rich 中定义样式。 // 这里需要在文本中使用标记符号： // `{styleName|text content text content}` 标记样式名。 // 注意，换行仍是使用 '\n'。 formatter: [ '{a|这段文本采用样式a}', '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}' ].join('\n'), rich: { 
    a: { 
    color: 'red', lineHeight: 10 }, b: { 
    backgroundColor: { 
    image: 'xxx/xxx.jpg' }, height: 40 }, x: { 
    fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#', borderRadius: 4 }, ... } } 

散点图动态涟漪效果：

看效果： 效果稍微有点大了，你们可以调，

上代码：

在series中，给每个属性添加： type: "effectScatter", rippleEffect: { 
    scale: 10, //控制涟漪动画的大小 }, showEffeon: "render", 

ok，完美！！！

修改饼图的坐标指示器的·文本标签 label：

先看效果：

上代码：

 { 
   a}：series { 
   b}：文字值 { 
   c}：数值 { 
   d}：百分比 label:{ 
    formatter: '{b}：{c}个', }, 

修改柱状图/折线图给他设置缩放，拖拽

效果图：缩放拖拽滚动…

上代码：

 dataZoom: { 
    type: 'inside', show: true, xAxisIndex: [0], left: '93%', start: 0, end: 45 }, 

柱状图粗细：

在series的每条数据中添加这个 barWidth: 10 （数字可以随意写，看ui需求） 属性即可

上代码：

series:[ { 
    //其他配置 ... barWidth: 10 //粗细可以根据需求 } ] 

效果图：