说实话，echarts饼图显示是个挺常见的需求，你懂的。

你得引入echarts库，害，这个是基础。

然后你需要一个容器来承载你的饼图，比如

，咱就是说这个div得有宽高，不然饼图没地方显示。

初始化echarts实例

接下来你需要初始化一个echarts实例，代码如下：

var myChart = echarts.init);

不对不对，应该是这样：

var myChart = echarts.init, '主题');

主题是可选的，你Ke以不指定，哈哈。

配置option

然后你需要配置option，这个是关键，饼图的所有属性dou在这里设置。

option = {

title: {

text: '某站点用户访问来源',

subtext: '纯属虚构',

left: 'center'

},

tooltip: {

trigger: 'item',

formatter: '{a} {b} : {c} '

},

//...

};

设置饼图数据

那个那个，数据系列的设置也hen重要。

series: }

Type是pie，这就表示你要画一个饼图了你懂的。

Echarts饼图位置调整

Echarts中提供了center属性来设置ECharts饼状图的位置。center属性是一个数组,第一个元素用于设置ECharts饼状图的横向位置,第二个元素用于设置ECharts饼状图的纵向位置。

Echarts饼状图中怎样设置ECharts饼状图的大小?

Echarts中提供了radius属性来设置ECharts饼状图的大小,radius属性也是一个数组,它指定了饼状图内外半径的大小,Ke以通过它来控制ECharts饼状图的大小。

ECharts中的legend怎么设置?

//...

};

Lengend布局方式有哪几种？

Lengend布局方式有水平和垂直两种,你Ke以设置Lengend的Orient属性为horizontal或vertical来指定Lengend的布局方式,默认是horizontal。

上图

Zui后一步 ,geng新option

myChart.setOption;

代码

Ru果你想进一步调整饼状图的位置 , Ke以 设置 center 属性。 center 属性也是一个数组 , 它指定了饼状图中心点的水平和垂直位置 , 相对于......

上图

---