123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <template>
- <div :class="className" :style="{height:height,width:width}"></div>
- </template>
-
- <script>
- import echarts from "echarts";
- require("echarts/theme/macarons"); // echarts theme
- import { debounce } from "@/utils";
-
- const animationDuration = 6000;
-
- export default {
- props: {
- className: {
- type: String,
- default: "chart"
- },
- width: {
- type: String,
- default: "100%"
- },
- height: {
- type: String,
- default: "380px"
- },
- title: {
- type: String,
- default: "chart"
- },
- options: {
- type: Object,
- default: function() {
- return {};
- }
- }
- },
- data() {
- return {
- chart: null,
- chartOptions: {}
- };
- },
- mounted() {
- this.initChart();
- this.__resizeHanlder = debounce(() => {
- if (this.chart) {
- this.chart.resize();
- }
- }, 100);
- window.addEventListener("resize", this.__resizeHanlder);
- },
- beforeDestroy() {
- if (!this.chart) {
- return;
- }
- window.removeEventListener("resize", this.__resizeHanlder);
- this.chart.dispose();
- this.chart = null;
- },
- created() {},
- watch: {
- options: function() {
- this.chartOptions = this.options;
- this.initChart();
- this.__resizeHanlder = debounce(() => {
- if (this.chart) {
- this.chart.resize();
- }
- }, 100);
- window.addEventListener("resize", this.__resizeHanlder);
- }
- },
- methods: {
- initChart() {
- console.log("this.chartOptions", this.chartOptions);
- this.chart = echarts.init(this.$el, "macarons");
- this.chart.setOption({
- title: {
- text: this.title
- },
- tooltip: {
- trigger: "axis",
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
- }
- },
- grid: {
- left: "2%",
- right: "2%",
- bottom: "3%",
- containLabel: true
- },
- xAxis: [
- {
- type: "category",
- data: this.chartOptions.xAxis,
- axisTick: {
- alignWithLabel: true
- }
- }
- ],
- yAxis: [
- {
- type: "value",
- axisTick: {
- show: false
- }
- }
- ],
- series: [
- {
- name: "",
- type: "bar",
- stack: "vistors",
- barWidth: "60%",
- data: this.chartOptions.series,
- animationDuration
- }
- ]
- });
- }
- }
- };
- </script>
|