option = { tooltip: {//提示框组件,也就是我们平时经常看见的鼠标移入后会有一个框框,显示你当前移入的参数名称和数据 trigger: 'item'//设置触发类型 'item'数据项触发主要是散点图,饼图/ 'axis'坐标轴触发主要就是柱状图,折线图 /'none'不触发 }, legend: {//图例组件,我理解的就是旁边那个文字 orient: 'vertical',//布局朝向这个是竖着排 'horizontal'就是横着排 bottom: '0',//距离容器的距离 left: 'right',//整个图例的位置 align: 'left',//这个可以设置图例标记相对于文字的位置 formatter: function (name) {//这个函数就是为了满足图例上也可以看到数据是多少写出来的 // 获取legend显示内容 let data = option.series[0].data; let total = 0; let tarValue = 0; for (let i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { if (data[i].name.length > 4) { name = name.slice(0, 4) + '...'; } tarValue = data[i].value; } } let p = ((tarValue / total) * 100).toFixed(0); return p + '%' + ' ' + name; }, data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads'] }, grid: { top: '8%', left: '-30%', right: '10%', bottom: '10%' }, series: [//相当于图案本体了,也就是饼图这个里面设置的就是这个饼的样子 { name: 'Access From', type: 'pie', center: ['25%', '50%'],//可以设置图案的在容器的位置 radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center', fontSize: 12 }, emphasis: { label: {//这个是我这个圆环中心文字的样式
show: true, fontSize: '12', 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' } ] } ] };
此条用于记录,自己对部分使用echarts时的部分总结