页面使用 - 引入注册使用
<div class="left2-info"> <BarChart :chartData="BarChartData" height="100%" /> </div>
柱状图 - BarChart.vue
<template> <div :class="className" :style="{ height: height, width: width }" /> </template> <script> import echarts from "echarts"; // require("echarts/theme/macarons"); // echarts theme import resize from "./mixins/resize"; const animationDuration = 6000; export default { mixins: [resize], props: { className: { type: String, default: "chart", }, width: { type: String, default: "100%", }, height: { type: String, default: "300px", }, chartData: { type: Object, required: true, }, }, data() { return { chart: null, }; }, watch: { chartData: { deep: true, handler(val) { this.setOption(val); }, }, }, mounted() { console.log(this.chartData); this.$nextTick(() => { this.initChart(); }); }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, methods: { initChart() { this.chart = echarts.init(this.$el, "macarons"); this.setOption(this.chartData); }, setOption(data) { data.series.forEach((item) => { item.type = "bar"; item.barWidth = 20; }); this.chart.setOption({ tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, }, color: ["#1adffe", "#fe5656"], backgroundColor: "", legend: { textStyle: { color: ["#1adffe", "#fe5656", "#fe5653"], //字体颜色 }, data: ["阴性", "阳性"], }, grid: { top: "15%", left: "1%", right: "1%", bottom: "3%", containLabel: true, }, xAxis: [ { type: "category", // data: ["24小时", "48小时", "72小时", "7日内", "7日以为"], data: data.xAxis, axisTick: { alignWithLabel: false, show: false, }, // axisLine: { // show: false, // }, axisLine: { lineStyle: { color: "#235f74", width: 2, //这里是为了突出显示加上的 }, }, splitLine: { show: false, }, axisLabel: { interval: 0, color: "#ffffff", }, splitArea: { show: false, }, }, ], yAxis: [ { type: "value", axisTick: { show: false, }, // axisLine: { // show: false, // }, axisLine: { lineStyle: { color: "#235f74", width: 2, //这里是为了突出显示加上的 }, }, splitLine: { show: false, }, axisLabel: { interval: 0, color: "#ffffff", }, splitArea: { show: false, }, // boundaryGap: [0, 2], }, ], series: data.series, animationDuration: 2800, // series: [ // { // name: "阴性", // type: "bar", // data: [79, 52], // }, // { // name: "阳性", // type: "bar", // data: [80, 52], // }, // ], }); }, }, }; </script>
用到的相关方法 resize.js
import { debounce } from '@/utils' export default { data() { return { $_sidebarElm: null, $_resizeHandler: null } }, mounted() { this.initListener() }, activated() { if (!this.$_resizeHandler) { // avoid duplication init this.initListener() } // when keep-alive chart activated, auto resize this.resize() }, beforeDestroy() { this.destroyListener() }, deactivated() { this.destroyListener() }, methods: { // use $_ for mixins properties // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential $_sidebarResizeHandler(e) { if (e.propertyName === 'width') { this.$_resizeHandler() } }, initListener() { this.$_resizeHandler = debounce(() => { this.resize() }, 100) window.addEventListener('resize', this.$_resizeHandler) this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) }, destroyListener() { window.removeEventListener('resize', this.$_resizeHandler) this.$_resizeHandler = null this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) }, resize() { const { chart } = this chart && chart.resize() } } }
utils/index.js
/** * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */ export function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function() { // 据上一次触发时间间隔 const last = +new Date() - timestamp // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用 if (!immediate) { result = func.apply(context, args) if (!timeout) context = args = null } } }