1.实现成果
2.实现原理
echarts官网：
https://echarts.apache.org/zh/index.html
3.残缺代码
https://gitee.com/susuhhhhhh/responsive-web-page
4.次要代码
var myChart = echarts.init(document.getElementById('main3'));var option = { title: { text: '这是一个echarts图表' }, tooltip: { trigger: 'item', position: function (point, params, dom, rect, size) { let x = 0; // x坐标地位 let y = 0; // y坐标地位 let pointX = point[0]; let pointY = point[1]; let boxWidth = size.contentSize[0]; let boxHeight = size.contentSize[1]; if (boxWidth > pointX) { x = 5; } else { x = pointX - boxWidth; } if (boxHeight > pointY) { y = 5; } else { y = pointY - boxHeight; } return [x, y]; } }, legend: { x : '70%', y : '25%', orient: 'vertical', align: 'right', // top: '5%', // left: 'center' formatter: function(name){ return name.length>5?name.substr(0,5)+"...":name; }, tooltip:{ show:true } }, series: [ { name: '拜访起源', type: 'pie', center : ['35%', '50%'], radius: ['10%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#ff5500', borderWidth: 2, // normal: { // show: true, // formatter: '{b}: {c}({d}%)' //自定义显示格局(b:name, c:value, d:百分比) // } normal: { label: { show: true, position: 'inner', formatter: "{d}%" }, labelLine: { show: true } }, emphasis: { shadowBlur: 20, shadowOffsetX: 0, shadowColor: 'rgba(30, 144, 255，0.5)', label: { show: true, fontSize: '20', fontWeight: 'bold' } } }, labelLine: { show: false }, data: [ {value: 1048, name: '搜索引擎搜索引擎搜索引擎搜索引擎'}, {value: 735, name: '间接拜访间接拜访间接拜访间接拜访'}, {value: 580, name: '邮件营销邮件营销邮件营销邮件营销'}, {value: 484, name: '联盟广告联盟广告联盟广告联盟广告'}, {value: 300, name: '视频广告视频广告视频广告'} ] } ] }; myChart.setOption(option);window.addEventListener('resize', function () { myChart.resize() })