//先是引入
import echarts from 'echarts'
//html中写
<div id="circle" style="width:250px;height:220px"></div>
//methods中写
// 饼图
statisticsPiechart() {
let pieChartContent1 = echarts.init(document.getElementById('piechart1'))
let pieChartContent2 = echarts.init(document.getElementById('piechart2'))
// console.log(pieChartContent1)
let option = {
title: {
//标题组件
text: '数据源统计系统', //主标题文本
subtext: '', //副标题文本
left: 'left', //标题组件距容器的距离,属性left距左侧距离,值为'left', 'center', 'right',组件会根据相应的位置自动对齐。
id: 'piechart1-text' //组件ID,可以在style更改样式
},
tooltip: {
//提示框组件
show: false //是否显示提示框组件
},
legend: {
//图例组件
orient: 'vertical', //图例列表的布局朝向 'vertical'为纵向,'horizontal'为横向
right: 'left', //标题组件距容器的距离,属性right距右侧距离。
//图例数据数组。如果 data 没有被指定,会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。
//data:[],
textStyle: { //图例的公用文本样式
fontStyle: 14,
color: '#1C9399',
fontWeight: 400,
lineHeight: 20,
padding: [7, 0, 7, 0]
},
selectorLabel: { //选择器按钮的文本标签样式
distance: 121 //距离图形元素的距离。当 position 为字符描述值(如 'top'、'insideRight')时候有效。
}
},
series: [ //系列列表
{
//name: '', //系列名称,hover属性提示内容
type: 'pie', //通过此项确定系列图表类型
radius: '55%',//饼图的半径
center: ['50%', '60%'],//饼图的中心(圆心)坐标,第一项为横坐标,第二项为纵坐标
data: [ //系列中数据内容数组。name:数据项名称;value:数据值(所占比重)
{ value: 105, name: 'Mpp,10.5%' },
{ value: 225, name: 'Hive,22.5%' },
{ value: 402, name: 'Mysql,40.2%' },
{ value: 268, name: 'Cdps,26.8%' }
],
emphasis: { //高亮的扇区和标签样式
itemStyle: {
shadowBlur: 10, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowOffsetX: 0,//阴影水平方向上的偏移距离
shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色
}
labeline: {//label是没有线和字的
normal: {
show: true // show设置线是否显示,默认为true,可选值:true ¦ false
},
emphasis: {
show: false
}
}
}
]
myChart1.setOption(option1, true)
}
//最后在mounted中调用
this.pieChart()
echarts饼状图
最新推荐文章于 2022-05-07 19:43:56 发布