Open zptime opened 3 years ago
<template> <div class="demo"> <div class="demo-title"> <div class="title">基础图表</div> </div> <div class="demo-block"> <div class="demo-block-title">-- 环形饼图 --</div> <div class="demo-block-content"> <div id="pieCharts" style="width: 300px; height: 200px;"></div> </div> </div> <div class="demo-block"> <div class="demo-block-title">-- 两饼图合成 --</div> <div class="demo-block-content"> <div id="pie2Charts" style="width: 500px; height: 200px;"></div> </div> </div> </div> </template> <script> import * as R from "ramda"; import { legend, tooltip, colorList } from "./utils"; // 饼图测试数据 const seriesData = [ { value: 1048, name: "搜索引擎", rate: 0.333 }, { value: 735, name: "直接访问", rate: 0.234 }, { value: 580, name: "邮件营销", rate: 0.184 }, { value: 484, name: "联盟广告", rate: 0.154 }, { value: 300, name: "视频广告", rate: 0.095 }, ]; // 计算测试数据总和 const seriesSum = R.reduce((acc, item) => acc + item.value, 0, seriesData); const initOption = { // legend其他样式可查看之前的系列文章,这里显示不同的地方;默认legend是一样的 legend: R.mergeDeepRight(legend, { orient: "horization", // 垂直排列 top: 40, left: 180, itemGap: 14, // 调整每项之前的间距 textStyle: { color: "#808080", // 文本颜色 }, // 解决legend显示百分比问题 formatter: function(name) { let rate = R.propOr( 0, "rate", R.find(R.propEq("name", name))(seriesData) ); rate = (rate * 100).toFixed(1); // 显示名称+百分比 return `${name} ${rate}%`; }, }), color: colorList, series: [ { name: "访问来源", type: "pie", radius: ["45%", "70%"], // 饼图的半径 avoidLabelOverlap: false, // 防止标签重叠,默认开启 center: [90, 102], // 饼图的中心(圆心)坐标 label: { // 文本标签 show: false, // position: "center", // 文本标签位置 }, labelLine: { // 引导线 show: false, }, itemStyle: { // 饼图白色间隙 borderWidth: 1, borderColor: "#fff", }, // emphasis: { // 高亮状态样式 // label: { // show: true, // fontSize: "40", // fontWeight: "bold", // }, // }, }, ], dataset: { dimensions: ["value", "name", "rate"], source: seriesData, }, tooltip: R.merge(tooltip, { trigger: "item", borderColor: "#fff", formatter: function(params) { // console.log(params); // 计算百分比时,params.percent是图表自己计算的;params.data.rate(在dimensions中定义的)是我们自己传的值 let html = `<div style="height:auto;width: 181px;"> <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;display:flex;align-items:center;line-height:1;"> <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${ params.color };"></span> ${params.name} </div> <div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;"> <span>访问量</span> <span style="flex:1;text-align:right;">${params.data.value}</span> </div> <div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;"> <span>占比</span> <span style="flex:1;text-align:right;">${( params.data.rate * 100 ).toFixed(1)}%</span> </div> </div>`; return html; }, }), }; let seriesObj = { name: "访问来源", type: "pie", radius: "90%", center: [186, 102], itemStyle: { borderWidth: 1, borderColor: "#fff", }, }; let initOption2 = { legend: R.mergeDeepRight(legend, { orient: "horization", top: 40, left: 360, itemGap: 14, textStyle: { color: "#808080", }, }), color: colorList, series: [ // 第一层 seriesObj, // 第二层 R.merge(seriesObj, { label: { show: true, position: "inner", // 标签的位置 textStyle: { fontSize: 10, //字体大小 color: "#fff", // 文字颜色 }, formatter: "{d}%", // 内容 }, }), ], dataset: { dimensions: ["value", "name", "rate"], source: seriesData, }, }; export default { data() { return { charts: null, charts2: null, }; }, mounted() { this.charts = this.$echarts.init( document.getElementById("pieCharts"), null, { renderer: "svg", } ); this.charts.setOption(R.clone(initOption)); this.charts2 = this.$echarts.init( document.getElementById("pie2Charts"), null, { renderer: "svg", } ); this.charts2.setOption(R.clone(initOption2)); }, methods: {}, }; </script> <style lang="scss" scoped></style>