Open zptime opened 3 years ago
test/charts/lineCharts文件
<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="lineCharts" style="width: 600px; height: 400px;"></div> </div> </div> </div> </template> <script> import * as R from "ramda"; import { xAxis, yAxis, lineTooltip } from "./utils"; const initOption = { title: { text: "累计消费趋势", // 标题 subtext: "同比上年同期,累计消费增加200元", // 副标题 top: -5, // 定位 left: -5, // 定位 subtextStyle: { // 副标题样式 color: "#808080", fontSize: 12, }, }, legend: { top: 24, // 定位,和副标题一排 right: 0, // 定位,和副标题一排,且在右边 icon: "circle", // 图例形状 // itemWidth: 25, // 图例标记的图形宽度 itemHeight: 6, // 图例标记的图形高度 itemGap: 24, // 图例每项之间的间隔 itemStyle: {}, // 图例的图形样式 textStyle: { // 图例文字属性 fontSize: 12, color: "#333", padding: [0, 0, 0, -8], // 修改文字和图标距离 }, }, grid: { // 绘图网格 top: 70, left: 0, right: 12, bottom: 0, containLabel: true, }, xAxis: R.mergeDeepRight(xAxis, { type: "category", boundaryGap: false, // 不留白 axisLabel: { interval: 50, // 只显示最大和最小坐标 showMinLabel: true, // 显示最小标签 showMaxLabel: true, // 显示最大标签 }, axisLine: { lineStyle: { type: "dashed", // 直线指示器为虚线 // dashOffset: 5 // 虚线的偏移量 }, }, axisPointer: { type: "line", // 直线指示器 }, }), yAxis: R.merge(yAxis, { type: "value", axisPointer: { show: false, }, }), series: [ { type: "line", color: "#1890ff", // 线条颜色 areaStyle: { color: "rgba(24,144,255,0.08)", // 区域背景色 }, showSymbol: false, // 只有在 tooltip hover 的时候显示 symbol: "emptyCircle", // 拐点形状 symbolSize: 6, //拐点大小 }, { type: "line", color: "#52c41a", areaStyle: { color: "rgba(82,196,26,0.08)", }, showSymbol: false, symbol: "emptyCircle", symbolSize: 6, }, ], dataset: { dimensions: ["金额", "2020年累计消费", "2021年累计消费"], source: [ ["1月", 200, 100], ["2月", 288, 200], ["3月", 360, 486], ["4月", 450, 680], ], }, tooltip: R.mergeDeepRight(lineTooltip, { axisPointer: { label: { show: true, // 鼠标悬浮时,显示x轴标签,如2月,3月; }, }, formatter: function(params) { let html = `<div style="height:auto;width:234px;"> <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;line-height:1;"> 截止 ${params[0].axisValue} </div> ${params .map( ( item ) => `<div style="font-size:12px;color:#808080;margin-bottom:8px;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:${ item.color };"></span> ${item.seriesName} <span style="flex:1;text-align:right;">${ item.value[item.encode.y[0]] }</span> </div>` ) .join("")} </div>`; return html; }, }), }; export default { data() { return { charts: null, }; }, mounted() { this.charts = this.$echarts.init( document.getElementById("lineCharts"), null, { renderer: "svg", } ); this.charts.setOption(R.clone(initOption)); }, methods: {}, }; </script> <style lang="scss" scoped></style>
test/charts/lineCharts文件