以官网案例中的Examples - Apache ECharts为例。配置文档Documentation - Apache ECharts

折线图的学习请看Echarts之折线图_W_小T的博客-CSDN博客

一、图例

控制图例的属性是：legend

(一)图例的方位

left:图例组件离容器左侧的距离

bottom:图例组件离容器底部的距离

right:图例组件离容器右侧的距离

top:图例组件离容器顶部的距离

如下图，想让图例在右下方，通过方位bottom和right就能来控制

 //图例所处方位bottom: '5%',right: '5%',

（二）图例列表的布局朝向-orient

可选：默认是水平方向

'horizontal'
'vertical'

如下图，图例是纵向排列

 orient: 'vertical',

（三）图例列表之间的间距-itemGap

图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。

 //图例之间的距离
itemGap: 10,

（四）图例图形的宽高

如下图，将图例的形状更改为正方形

 itemWidth: 12,// 设置图例图形的宽itemHeight: 12,

（五）图例文字颜色

如下图，文字颜色根据图例的颜色自动配置

 // 图例的文字颜色textStyle: {color: 'auto'}

二、环形图

文档中的案例一般给出的已经很完美了，按照自己所需可以细节性的调整，我调整的样子如下：

radius: ['40%', '47%'],//环形图的大小

鼠标移向饼环之上，不会提示
emphasis: {
label: {
show: false,//是否显示标签。
fontSize: '40',
fontWeight: 'bold'
}
},

series: [{name: 'Access From',type: 'pie',radius: ['40%', '47%'],//环形图的大小avoidLabelOverlap: false,// 饼图位置参数// center: ["26%", "40%"], // 这个属性调整图像的位置！！！！！label: {show: false,position: 'center'},emphasis: {label: {show: false,//是否显示标签。fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]

三、环条

如下图，修改环条的样子和环条与环条之间的间距（一般有底色的时候要按照底色来设置边框颜色）

在series里面添加

 itemStyle: {//环形状和环之间的间距borderRadius: 10,borderColor: '#fff',//边框颜色// borderWidth: 20//边框宽},

四、开启延长线

series里面的 label和labelLine都需要开启（或者都不写，默认为true）

单独个环条显示延长线或者某条不显示，就在sweies下的data里面对应下添加 label和labelLine属性，如我的是绿色环条不显示延长线和提示词：

labelLine: {
show: false,
},
label: {
show: false,
},

 data: [{ value: 1048, name: 'Search Engine' ,},{ value: 735, name: 'Direct',labelLine: {show: false,},label: {show: false,},},{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]

若想改变环条颜色，在对应的下面添加itemStyle和textStyle，这样环条和图例颜色会发生变化

itemStyle: {//环条颜色
color: '#47B5FF',
},

textStyle: {//图例颜色
color: '#47B5FF'
},

 data: [{ value: 1048, name: 'Search Engine' ,},{ value: 735, name: 'Direct',labelLine: {show: false,},label: {show: false,},itemStyle: {//环条颜色color: '#47B5FF',},textStyle: {//图例颜色color: '#47B5FF'},},{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]

今日的学习到此结束，最后提一嘴，修改提示词可以用formatter

Echarts之饼图相关推荐

Echarts 解决饼图文字过长重叠的问题
Echarts 解决饼图文字过长重叠的问题参考文章: (1)Echarts 解决饼图文字过长重叠的问题 (2)https://www.cnblogs.com/yingsu/p/10608014.ht ...
echarts饼图解析html标签,解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
java word 饼图_[Java教程]echarts标准饼图解读(一)——基本配置demo
[Java教程]echarts标准饼图解读(一)--基本配置demo 0 2016-11-21 17:00:18 echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title) ...
Echarts pie 饼图类型后显示数据
Echarts pie 饼图类型后显示数据 sysPie:function(libtypelist){var that=this;libtypelist=that.indexData.libtypel ...
Echarts实现饼图+饼图中心文字显示
Echarts实现饼图+饼图中心文字显示描述效果源代码描述 Echarts实现饼图+中心文字显示. 在 title 内实现饼图中心文字展示. 效果源代码 let data = [{ name ...
echart饼图标签重叠_解决echarts中饼图标签重叠的问题
饼图中的series有个avoidLabelOverlap属性, avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠. ...
echarts 3d饼图
echarts 3d饼图效果图: 第一步: 在main.js引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = ...
Echarts pie饼图的使用（入门级）
2023.1.6今天我学习了如何使用echarts pie饼图,效果如: 首先是给容器设置id,宽高然后是 var pieChart = echarts.init(document.getEleme ...
echarts中饼图显示百分比
通过echarts制作饼图,需要通过鼠标移动到对应的扇形才能才看数值和百分比. 解决这个问题参考的是将鼠标移动到扇形上的显示方法: tooltip : { trigger: ...
echarts中饼图的指示线前加圆点
echarts中饼图的指示线加圆点 echart中饼图的指示线加圆点,圆点的颜色与指示线的颜色一致 let data = [{"name": "业务1",&qu ...

Echarts之饼图