车辆所有权构成 - 图表展示 | 数据分析

option = {\n title: {\n text: '车辆所有权构成（辆）',\n left: 'center'\n },\n tooltip: {\n trigger: 'item',\n formatter: function(params) {\n return ${params.name} | ${params.value}%;\n }\n },\n // legend: {\n // left: "right",\n // top: "center",\n // orient: "vertical",\n // align: "left",\n // formatter: function (name) {\n // var value;\n // picData1.forEach((item) => {\n // if (item.name === name) {\n // value = item.value;\n // }\n // });\n // return ${name}|${value}%; //返回出图例所显示的内容是名称+百分比\n // },\n // },\n series: [\n {\n name: '车辆所有权构成（辆）',\n type: 'pie',\n radius: ['40%', '70%'],\n avoidLabelOverlap: false,\n label: {\n show: false,\n position: 'center'\n },\n emphasis: {\n label: {\n show: false,\n fontSize: '40',\n fontWeight: 'bold'\n }\n },\n labelLine: {\n show: false\n },\n data: [\n { value: 32.6, name: '外租车辆' },\n { value: 67.4, name: '自有企业' }\n ]\n },\n\n // 就是这里！\n {\n name: '',\n z: -1,\n type: 'gauge',\n radius: '-50%',\n center: [50%, 50%],\n // 配置中间的数字\n detail: {\n // 调节数字位置\n offsetCenter: [0, 20],\n fontSize: 20\n },\n pointer: {\n show: false\n },\n axisTick: {\n show: false\n },\n axisLine: {\n show: false\n },\n splitLine: {\n show: false\n },\n axisLabel: {\n show: false\n },\n // 中间的字和数字 数据\n data: [\n {\n value: 1000,\n name: '总计'\n }\n ]\n }\n ]\n};\n// data的value 是小数，如何鼠标移入图形部分的时候显示对应的name和对应的百分比内容：要在鼠标移入图形部分时显示对应的name和百分比，需要在tooltip配置项中进行设置。可以通过formatter属性来自定义tooltip的显示内容。\n\n在option中的tooltip配置项中添加formatter属性，设置一个回调函数，函数的参数params是一个对象，其中params.name表示当前鼠标所在图形的名称，params.value表示当前鼠标所在图形的值。通过这两个参数可以获取到对应的name和百分比。\n\n下面是修改后的option配置代码：\n\njavascript\noption = {\n title: {\n text: '车辆所有权构成（辆）',\n left: 'center'\n },\n tooltip: {\n trigger: 'item',\n formatter: function(params) {\n return `${params.name} | ${params.value}%`;\n }\n },\n // ...\n}\n\n\n这样，在鼠标移入图形部分时，tooltip会显示当前图形的name和对应的百分比。