Open zptime opened 3 years ago
<template> <div id="pdfDom" class="demo-wrapper"> <!-- 饼图 --> <pie-charts /> <div class="demo"> <div class="demo-title"> <div class="title">基础图表</div> <!-- <a-button type="primary" @click="handleExportPdf">导出</a-button> --> <!-- <a-button type="primary" v-print="printObj">window.print()</a-button> --> </div> <div class="demo-block"> <div class="demo-block-title">-- 折线图 --</div> <div class="demo-block-content"> <div id="chart" style="width: 600px; height: 400px"></div> </div> </div> </div> <!-- 柱状图 --> <bar-charts /> <!-- 折线图 --> <line-charts /> </div> </template> <script> import barCharts from "./barCharts" import lineCharts from "./lineCharts" import pieCharts from "./pieCharts" export default { data() { return { // 前端html转pdf解决方案:https://juejin.cn/post/6844903612993241101 printObj: { id: "pdfDom", popTitle: "good print", extraCss: "https://www.google.com,https://www.google.com", extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>', }, }; }, components: { barCharts, lineCharts, pieCharts, }, mounted() { this.initCharts(); }, methods: { initCharts() { // 参考文档:https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-jqyw2elc.html // 官方文档:http://echarts.apache.org/zh/index.html // 社区地址:https://www.makeapie.com/explore.html#sort=createTime~timeframe=all~author=all // 按需加载配置:查看@libs/echarts和main.js文件 let chart = this.$echarts.init( document.getElementById("chart") ); let option = { // 图表名 title: { text: "店铺销售折线图", }, // 提示框 tooltip: { trigger: "axis", //开启tips框框 axisPointer: { type: "cross" }, //y轴刻度跟随鼠标显示 }, color: ["red", "yellow", "blue"], // 图例配置 legend: { data: ["销量", "广告主数", "预估收益"], left: "right", // 对齐方式 }, // 设置折线图大小 grid: { top: 60, // 主图距离整个容器顶部的距离 left: 60, right: 0, bottom: 60, }, xAxis: { type: "category", // 类型:value-数值轴;category-类目轴,离散数据;time-时间轴;log-对数轴 data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], boundaryGap: true, //坐标轴两边留白 axisLine: { //坐标轴轴线 onZero: true, show: true, // 是否显示 lineStyle: { // 轴线样式 color: "purple", width: "92%", // opacity: 0.01, //设置透明度就可以控制显示不显示 }, }, axiosTick: { // 坐标轴刻度 show: true, alignWithLabel: true, interval: "auto", lineStyle: { // 刻度线样式 }, }, axisPointer: { label: { //相当于tips的标题 formatter: function (params) { return params.value + "详情"; }, }, }, splitLine: { // 网格线 show: false, // 网格线 lineStyle: { color: "#eeeeee", }, }, }, yAxis: { type: "value", min: 0, //最小刻度 max: 5000, //最大刻度 name: "数量", //是基于Y轴线对齐,用空格站位让坐标轴名称与刻度名称对齐 nameTextStyle: { color: "#444e65", align: "left", //文字水平对齐方式 verticalAlign: "middle", //文字垂直对齐方式 }, splitLine: { // 网格线 lineStyle: { color: "lightblue", }, }, axisTick: { show: false, //去掉刻度线 }, axisLabel: { color: "pink", //Y轴刻度字颜色 }, axisLine: { lineStyle: { // 设置y轴轴线颜色 color: "blue", }, }, }, series: [ { name: "销量", type: "line", // 图表类型,折线图 data: [1344, 1342, 1432, 1232, 1346, 1336], label: { // 图形上的文本标签 normal: { formatter: "{@data}℃", show: true, //显示数据 color: "#00af58", position: "top", fontSize: "14", }, }, itemStyle: { // 折线拐点标志的样式 normal: { color: "#00af58", }, }, areaStyle: { // 区域填充样式 normal: { // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置 color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(0, 175, 88, 0.4)", }, { offset: 1, color: "rgba(0, 175, 88, 0.01)", }, ], globaCoord: false, }, // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变 // color: { // type: "radial", // x: 0.5, // y: 0.5, // r: 0.5, // colorStops: [ // { // offset: 0, // color: "red", // 0% 处的颜色 // }, // { // offset: 1, // color: "blue", // 100% 处的颜色 // }, // ], // globalCoord: false, // 缺省为 false // }, // 纹理填充 // color: { // image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串 // repeat: "repeat", // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat' // }, }, }, }, { name: "广告主数", type: "line", smooth: false, data: [232, 433, 235, 636, 334, 233], }, { name: "预估收益", type: "line", smooth: true, // true曲线 false折线 data: [1133, 1323, 4323, 2323, 1343, 1033], }, ], }; chart.setOption(option); }, handleExportPdf() { // window.scrollTo(0, 0); // 确保打印内容完整 document.body.scrollTop = 0; // IE的 document.documentElement.scrollTop = 0; // 其他 // this.getPdf("pdfDom", "消费统计"); // 局部打印 // https://my.oschina.net/u/2612473/blog/4310030 // https://cloud.tencent.com/developer/article/1644472 }, }, }; </script> <style lang="scss"> .demo { background-color: #fff; padding: 16px; margin-bottom: 20px; &-title { display: flex; align-items: center; .title { font-weight: bold; font-size: 24px; margin-right: 32px; } .ant-btn { margin-right: 8px; } } &-flex { display: flex; &-split { width: 320px; } &-margin { margin-right: 30px; } } &-block { &-title { margin: 12px 0 6px; } &-content { display: inline-block; &-flex { display: flex; align-items: center; } } } } </style>