精华内容
下载资源
问答
  • vue封装echarts组件
    2021-02-25 16:23:12

    Vue封装echarts组件

    <template>
      <div class="container">
        <div :id="Id"
             class="echart"></div>
      </div>
    </template>
    <script>
      import * as echarts from 'echarts'
      export default {
      	name: 'EchartsComponents',
      	props: {
      		Id: {
      			type: String,
      		},
      		Option: {
      			type: Array,
      			default: () => {},
      		},
      		onClk: {
      			type: Boolean,
      			default: false,
      		},
      		time: '',
      	},
      	data() {
      		return {}
      	},
      	methods: {
      		loadEchart() {
      			const myChart = echarts.init(document.getElementById(this.Id))
      			myChart.setOption(this.Option)
      			//这里添加折线图拐点点击事件
      			if (this.onClk) {
      				myChart.on('click', (param) => {
      					this.$router.push({
      						path: '/yesterdayNewly',
      						query: {
      							lineTime: param.data[0], //折线图拐点对应时间
      						},
      					})
      				})
      			}
      		},
      	},
      	created() {},
      	mounted() {
      		let _this = this
      		_this.$nextTick(() => {
      			_this.loadEchart()
      		})
      	},
      	watch: {
      		time: {
      			handler: function () {
      				this.loadEchart()
      			},
      			deep: true,
      		},
      	},
      }
    </script>
    <style lang="scss" scoped>
      .container {
      	.echart {
      		margin: 0 auto;
      		min-width: 310px;
      		height: 400px;
      	}
      }
    </style>
    
    更多相关内容
  • vue 封装echarts 组件

    2019-03-05 17:05:35
    vue 封装echarts 组件,主要传递四个参数到组件中,title、legend、series、xAxis,分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用,数据被覆盖问题解决办法。
  • 2.在vue项目中使用Echarts组件使用子组件的代码 template区的使用 <BarChart :labelList="chartData.labelList" :checkOutValueList="chartData.checkOutValueList" :putInValueList

    需求:显示默认时间为当前时间至7天之前时间 去请求数据

    实现效果:
    在这里插入图片描述
    1.安装Echarts

    cnpm install echarts -S
    

    2.在vue项目中使用Echarts
    在这里插入图片描述
    父组件使用子组件的代码
    template区的使用

         <BarChart
            :labelList="chartData.labelList"
            :checkOutValueList="chartData.checkOutValueList"
            :putInValueList="chartData.putInValueList"
          />
    

    数据 (引入组件,注册组件,定义图表需要的数据)
    在这里插入图片描述

     data() {
        return {
         chartData: {}, //echart图表数据
        };
      },
    

    接口返回数据
    在这里插入图片描述

      created() {
        this.getList();
      },
      methods: {
        getList() {
          let data = {
            updateDate: this.deviceFormData.time,
            pn: this.pn,
          };
          getInOutData(data).then((res) => {
            this.chartData = res;
            console.log(this.chartData, "子组件this.chartData");
          });
        },
      }
    

    数据结构:
    在这里插入图片描述
    子组件页面代码(接收数据,并渲染)

    <template>
      <div
        :class="className"
        :style="{ height: height, width: width }"
        id="myChart"
      />
    </template>
    
    <script>
    import echarts from "echarts";
    export default {
      props: {
        //接受父组件传递来的数据
        labelList: Array,
        checkOutValueList: Array,
        putInValueList: Array,
        className: {
          type: String,
          default: "chart",
        },
        width: {
          type: String,
          default: "100%",
        },
        height: {
          type: String,
          default: "300px",
        },
      },
      data() {
        return {};
      },
      watch: {
        labelList: function (newQuestion, oldQuestion) {
          this.initChart();
        },
      },
      mounted() {
        this.initChart();
      },
      methods: {
        initChart() {
          // 创建 echarts 实例。
          var myChartOne = echarts.init(document.getElementById("myChart"));
          myChartOne.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {
              textStyle: {
                color: "#ffffff",
              },
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: this.labelList,
                axisTick: {
                  alignWithLabel: true,
                },
                axisLabel: {
                  textStyle: {
                    color: "#fff", //坐标值得具体的颜色
                  },
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  textStyle: {
                    color: "#fff", //坐标值得具体的颜色
                  },
                },
              },
            ],
            series: [
              {
                name: window.vm.$i18n.t("barChart.putQuantity"),
                type: "bar",
                data: this.checkOutValueList,
                itemStyle: {
                  color: "#9B59B6",
                },
              },
              {
                name: window.vm.$i18n.t("barChart.outQuantity"),
                type: "bar",
                data: this.putInValueList,
                itemStyle: {
                  color: "#DFBA49",
                },
              },
            ],
          });
        },
      },
    };
    </script>
    
    
    展开全文
  • vue3封住echarts组件,包含自适应屏幕,代码可复用
  • 组件目录结构: 使用: <!--menu1--> <template> <div> <el-button @click="setData()">更新</el-button> <LjEchart :options="options" width="600px"></LjEchart&...

    版本:"echarts": "^5.0.1"

    cnpm i -S echarts@5.0.1

     组件目录结构:

    使用:

    <!--menu1-->
    <template>
      <div>
        <el-button @click="setData()">更新</el-button>
        <LjEchart :options="options" width="600px"></LjEchart>
      </div>
    </template>
    
    <script>
    import LjEchart from "@/components/LjEchart/index.vue";
    export default {
      name: "",
      components: {
        LjEchart,
      },
      props: {},
      data() {
        return {
          cdata: {
            category: ["2015", "2016", "2017", "2018", "2019", "2020"],
            barData: [120, 200, 150, 80, 70, 110, 130],
          },
        };
      },
      computed: {
        options() {
          return {
            xAxis: {
              type: "category",
              data: this.cdata.category,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: this.cdata.barData,
                type: "bar",
              },
            ],
            tooltip: {
              trigger: "axis",
              backgroundColor: "rgba(255,255,255,0.1)",
              borderColor: "rgba(255,255,255,0.1)",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true,
                  backgroundColor: "#7B7DDC",
                },
              },
              textStyle: {
                color: "white",
              },
            },
          };
        },
      },
      methods: {
        setData() {
          this.cdata.category = ["2015", "2016", "2017", "2018", "2019", "2020"];
          this.cdata.barData = [220, 100, 350, 280, 170, 310, 30];
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    </style>

    可以自定义主题:只需要传入属性theme即可。首先下载json格式的主题,如test.json,放在@/assets文件夹中。页面中导入主题 import testTheme from "@/assets/test.json",并赋值给属性myTheme:testTheme

    <LjEchart :options="options" width="600px" :theme="myTheme"></LjEchart>

    index.vue:

    <template>
      <div :style="{ height: height, width: width }" />
    </template>
    
    <script>
    import theme from "./theme.json"; // 引入默认主题
    
    import resizeMixins from "./utils/resizeMixins";
    
    export default {
      name: "echart",
      mixins: [resizeMixins],
      props: {
        width: {
          type: String,
          default: "100%",
        },
        height: {
          type: String,
          default: "400px",
        },
        options: {
          type: Object,
          default: () => ({}),
        },
        theme: {
          type: Object,
          default: () => {
            return theme;
          },
        },
      },
      data() {
        return {
          chart: null,
        };
      },
      watch: {
        options: {
          handler(options) {
            // 设置true清空echart缓存
            this.chart.setOption(options, true);
          },
          deep: true,
        },
      },
      mounted() {
        this.$echarts.registerTheme("theme", this.theme); // 覆盖默认主题
    
        this.initChart();
      },
      methods: {
        initChart() {
          // 初始化echart
          this.chart = this.$echarts.init(this.$el, "theme");
          this.chart.setOption(this.options, true);
        },
      },
    };
    </script>
    

     utils/index.js:

    /**
     * @param {Function} fn 防抖函数
     * @param {Number} delay 延迟时间
     */
    export function debounce(fn, delay) {
        var timer;
        return function () {
            var context = this;
            var args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn.apply(context, args);
            }, delay);
        };
    }

    utils/resizeMixins.js

    // 混入代码 resize-mixins.js
    import { debounce } from './index.js';
    const resizeChartMethod = '$__resizeChartMethod';
    
    export default {
        data() {
            // 在组件内部将图表 init 的引用映射到 chart 属性上
            return {
                chart: null,
            };
        },
        created() {
            window.addEventListener('resize', this[resizeChartMethod], false);
        },
        activated() {
            // 防止 keep-alive 之后图表变形
            if (this.chart) {
                this.chart.resize()
            }
        },
        beforeDestroy() {
            window.removeEventListener('resize', this[resizeChartMethod]);
        },
        methods: {
            // 防抖函数来控制 resize 的频率
            [resizeChartMethod]: debounce(function () {
                if (this.chart) {
                    this.chart.resize();
                }
            }, 300)
        },
    };

    flexible.js:

    (function (win, lib) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var metaEl = doc.querySelector('meta[name="viewport"]');
        var flexibleEl = doc.querySelector('meta[name="flexible"]');
        var dpr = 0;
        var scale = 0;
        var tid;
        var flexible = lib.flexible || (lib.flexible = {});
    
        if (metaEl) {
            console.warn("将根据已有的meta标签来设置缩放比例");
            var match = metaEl
                .getAttribute("content")
                // eslint-disable-next-line no-useless-escape
                .match(/initial\-scale=([\d\.]+)/);
            if (match) {
                scale = parseFloat(match[1]);
                dpr = parseInt(1 / scale);
            }
        } else if (flexibleEl) {
            var content = flexibleEl.getAttribute("content");
            if (content) {
                // eslint-disable-next-line no-useless-escape
                var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
                // eslint-disable-next-line no-useless-escape
                var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
                if (initialDpr) {
                    dpr = parseFloat(initialDpr[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
                if (maximumDpr) {
                    dpr = parseFloat(maximumDpr[1]);
                    scale = parseFloat((1 / dpr).toFixed(2));
                }
            }
        }
    
        if (!dpr && !scale) {
            // eslint-disable-next-line no-unused-vars
            var isAndroid = win.navigator.appVersion.match(/android/gi);
            var isIPhone = win.navigator.appVersion.match(/iphone/gi);
            var devicePixelRatio = win.devicePixelRatio;
            if (isIPhone) {
                // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
                if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                    dpr = 3;
                } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                    dpr = 2;
                } else {
                    dpr = 1;
                }
            } else {
                // 其他设备下,仍旧使用1倍的方案
                dpr = 1;
            }
            scale = 1 / dpr;
        }
    
        docEl.setAttribute("data-dpr", dpr);
        if (!metaEl) {
            metaEl = doc.createElement("meta");
            metaEl.setAttribute("name", "viewport");
            metaEl.setAttribute(
                "content",
                "initial-scale=" +
                scale +
                ", maximum-scale=" +
                scale +
                ", minimum-scale=" +
                scale +
                ", user-scalable=no"
            );
            if (docEl.firstElementChild) {
                docEl.firstElementChild.appendChild(metaEl);
            } else {
                var wrap = doc.createElement("div");
                wrap.appendChild(metaEl);
                doc.write(wrap.innerHTML);
            }
        }
    
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            // 最小1366px,最大适配2560px
            if (width / dpr < 1366) {
                width = 1366 * dpr;
            } else if (width / dpr > 2560) {
                width = 2560 * dpr;
            }
            // 设置成24等份,设计稿时1920px的,这样1rem就是80px
            var rem = width / 24;
            docEl.style.fontSize = rem + "px";
            flexible.rem = win.rem = rem;
        }
    
        win.addEventListener(
            "resize",
            function () {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            },
            false
        );
        win.addEventListener(
            "pageshow",
            function (e) {
                if (e.persisted) {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            },
            false
        );
    
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = 12 * dpr + "px";
        } else {
            doc.addEventListener(
                "DOMContentLoaded",
                // eslint-disable-next-line no-unused-vars
                function (e) {
                    doc.body.style.fontSize = 12 * dpr + "px";
                },
                false
            );
        }
    
        refreshRem();
    
        flexible.dpr = win.dpr = dpr;
        flexible.refreshRem = refreshRem;
        flexible.rem2px = function (d) {
            var val = parseFloat(d) * this.rem;
            if (typeof d === "string" && d.match(/rem$/)) {
                val += "px";
            }
            return val;
        };
        flexible.px2rem = function (d) {
            var val = parseFloat(d) / this.rem;
            if (typeof d === "string" && d.match(/px$/)) {
                val += "rem";
            }
            return val;
        };
    })(window, window["lib"] || (window["lib"] = {}));
    

    theme.json:

    {
        "color": [
            "#2d8cf0",
            "#19be6b",
            "#ff9900",
            "#E46CBB",
            "#9A66E4",
            "#ed3f14"
        ],
        "backgroundColor": "rgba(0,0,0,0)",
        "textStyle": {},
        "title": {
            "textStyle": {
                "color": "#516b91"
            },
            "subtextStyle": {
                "color": "#93b7e3"
            }
        },
        "line": {
            "itemStyle": {
                "normal": {
                    "borderWidth": "2"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": "2"
                }
            },
            "symbolSize": "6",
            "symbol": "emptyCircle",
            "smooth": true
        },
        "radar": {
            "itemStyle": {
                "normal": {
                    "borderWidth": "2"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": "2"
                }
            },
            "symbolSize": "6",
            "symbol": "emptyCircle",
            "smooth": true
        },
        "bar": {
            "itemStyle": {
                "normal": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                },
                "emphasis": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                }
            }
        },
        "pie": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "scatter": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "boxplot": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "parallel": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "sankey": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "funnel": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "gauge": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "candlestick": {
            "itemStyle": {
                "normal": {
                    "color": "#edafda",
                    "color0": "transparent",
                    "borderColor": "#d680bc",
                    "borderColor0": "#8fd3e8",
                    "borderWidth": "2"
                }
            }
        },
        "graph": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": 1,
                    "color": "#aaa"
                }
            },
            "symbolSize": "6",
            "symbol": "emptyCircle",
            "smooth": true,
            "color": [
                "#2d8cf0",
                "#19be6b",
                "#f5ae4a",
                "#9189d5",
                "#56cae2",
                "#cbb0e3"
            ],
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#eee"
                    }
                }
            }
        },
        "map": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#f3f3f3",
                    "borderColor": "#516b91",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "rgba(165,231,240,1)",
                    "borderColor": "#516b91",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#000"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "rgb(81,107,145)"
                    }
                }
            }
        },
        "geo": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#f3f3f3",
                    "borderColor": "#516b91",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "rgba(165,231,240,1)",
                    "borderColor": "#516b91",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#000"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "rgb(81,107,145)"
                    }
                }
            }
        },
        "categoryAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#fff"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "valueAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#fff"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "logAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#999999"
                }
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "timeAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#999999"
                }
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "toolbox": {
            "iconStyle": {
                "normal": {
                    "borderColor": "#999"
                },
                "emphasis": {
                    "borderColor": "#666"
                }
            }
        },
        "legend": {
            "textStyle": {
                "color": "#fff"
            }
        },
        "tooltip": {
            "axisPointer": {
                "lineStyle": {
                    "color": "#ccc",
                    "width": 1
                },
                "crossStyle": {
                    "color": "#ccc",
                    "width": 1
                }
            }
        },
        "timeline": {
            "lineStyle": {
                "color": "#8fd3e8",
                "width": 1
            },
            "itemStyle": {
                "normal": {
                    "color": "#8fd3e8",
                    "borderWidth": 1
                },
                "emphasis": {
                    "color": "#8fd3e8"
                }
            },
            "controlStyle": {
                "normal": {
                    "color": "#8fd3e8",
                    "borderColor": "#8fd3e8",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "color": "#8fd3e8",
                    "borderColor": "#8fd3e8",
                    "borderWidth": 0.5
                }
            },
            "checkpointStyle": {
                "color": "#8fd3e8",
                "borderColor": "rgba(138,124,168,0.37)"
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#8fd3e8"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#8fd3e8"
                    }
                }
            }
        },
        "visualMap": {
            "color": [
                "#516b91",
                "#59c4e6",
                "#a5e7f0"
            ]
        },
        "dataZoom": {
            "backgroundColor": "rgba(0,0,0,0)",
            "dataBackgroundColor": "rgba(255,255,255,0.3)",
            "fillerColor": "rgba(167,183,204,0.4)",
            "handleColor": "#a7b7cc",
            "handleSize": "100%",
            "textStyle": {
                "color": "#333"
            }
        },
        "markPoint": {
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#eee"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#eee"
                    }
                }
            }
        }
    }

    展开全文
  • vue封装echarts组件

    2021-02-03 14:48:24
    组件 <template> <div id="echartsItem" style="width: 100%; height: 400px" :legendData="legendData" :echartsData="echartsData" ></div> </template> <script> import ...

    话不多说,先上代码。
    组件:

    <template>
        <div
          id="echartsItem"
          style="width: 100%; height: 400px"
          :legendData="legendData"
          :echartsData="echartsData"
        ></div>
    </template>
    <script>
    import echarts from "@/utils/echars";
    export default {
      name: "echartsList",
      mixins: [mixin],
      components: {},
      props: {
        legendData: {
          type: Array,
          default: () => [],
        },
        echartsData: {
          type: Object,
          default: null,
        }
      },
      data() {
        return {
          option: {
            grid: {
              left: "0",
              right: "10",
              top: "8%",
              bottom: "10%",
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              textStyle: {
                color: "#79828b",
                fontSize: "12px",
              },
              axisPointer: {
                color: "#0FA0F8",
              }
            },
            legend: {
              bottom: "0",
              icon: "circle",
              itemHeight: 10,
              textStyle: {
                padding: [0, 30, 0, 0],
              },
              data: this.legendData,
            },
            toolbox: {
              show: true,
              feature: {
                magicType: { show: true, type: ["stack", "tiled"] },
                saveAsImage: { show: true },
              },
            },
            xAxis: {
              type: "category",
              axisLabel: {
                color: "#A9A9A9",
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              data: [],
            },
            yAxis: {
              name: "",
              type: "value",
              axisLine: {
                show: false,
              },
    
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#A9A9A9",
              },
              splitLine: {
                show: false,
              },
              axisPointer: {
                snap: true,
              },
            },
            series: [
              {
                type: "bar",
                itemStyle: {
                  normal: {
                    color: "rgba(246, 248, 250,1)",
                    width: "33px",
                  },
                },
                emphasis: {
                  itemStyle: {
                    color: "rgba(246, 248, 250,1)",
                  },
                },
                zlevel: 0,
                data: [],
                barGap: "-100%",
                barCategoryGap: "20%",
                animation: false,
              },
              {
                name: this.legendData[1],
                type: "line",
                smooth: true,
                zlevel: 1,
                itemStyle: {
                  borderColor: "#E7B962",
                  color: "#E7B962",
                },
                lineStyle: {
                  color: "#E7B962",
                },
                areaStyle: {},
                data: [],
              },
              {
                name: this.legendData[2],
                type: "line",
                smooth: true,
                zlevel: 1,
                itemStyle: {
                  borderColor: "#49A4FF",
                  color: "#49A4FF",
                },
                lineStyle: {
                  color: "#49A4FF",
                },
                areaStyle: {},
                data: [],
              },
              {
                name: this.legendData[0],
                type: "line",
                smooth: true,
                zlevel: 1,
                itemStyle: {
                  borderColor: "#8ED83E",
                  color: "#8ED83E",
                },
                lineStyle: {
                  color: "#8ED83E",
                },
                areaStyle: {},
                data: [],
              },
            ],
          },
        };
      },
      watch: {
        echartsData: {
          handler(val) {
            this.getChart();
          },
          deep: true,
        },
      },
      mounted() {
        this.getChart();
        this.initEchart();
      },
      computed: {},
     
      methods: {
        // echarts数据
        initEchart() {
          this.myChart = echarts.init(document.getElementById("echartsItem"));
          this.setOption();
        },
        setOption() {
          this.option.yAxis.name = this.echartsData.yAxis.name;
          this.option.series[0].data = this.echartsData.series[0].data;
          this.option.series[1].data = this.echartsData.series[1].data;
          this.option.series[2].data = this.echartsData.series[2].data;
          this.option.series[3].data = this.echartsData.series[3].data;
          this.option.xAxis.data = this.echartsData.xAxis.data;
          this.myChart.setOption(this.option, true);
          this.myChart.resize();
        },
        getChart() {
          this.$nextTick(() => {
            this.initEchart();
          });
        },
      },
      beforeDestroy () {
        if (this.myChart) {
          this.myChart.clear()
        }
      },
    
    };
    </script>
    

    调用组件

    <template>
    	<echartsList :legendData="legendData" :echartsData="echartsData"></echartsList>
    </template>
    <script>
    	data() {
    	    return {
    	    //你要传的echarts数据,调用接口后赋值
    			legendData: ["活动***", "活动***", "活动***"],
    			echartsData: {
    			  xAxis: {
    			    data: [],
    			  },
    			  yAxis: {
    			    name:"人数"
    			  },
    			  series: [
    			    {data: []},
    			    {data: []},
    			    {data: []},
    			    {data: []},
    			  ]
    			}
    		}
    	},
    	mounted() {this.getData()},
    	methods: {
    		getData(){	//获取数据接口
    			this.echartsData.yAxis.max = this.option.series[0].data[0];
    		}
    	}
    </script>
    

    不封装的话每次用到都要重新配置,太麻烦,不如封装成组件提高复用性。这里的代码是简化后的,效果什么的根据需求加就好了,若有错误请指出。

    展开全文
  • vue 封装 echarts 组件

    2022-07-05 18:14:25
    vue 封装 echarts 组件
  • Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件,下面这篇文章主要给大家介绍了关于vue.js如何将echarts封装组件一键使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友...
  • 2.封装echarts组件 新建组件echats.vue 首先应该明确Echarts图形必须满足四项刚性条件才可以绘制: 准备一个具有宽高的容器(container); 每次绘制之前需要初始化(init); 必须设置配置,否则无从绘制(optio
  • vue组件封装echarts

    2022-06-17 13:59:58
    vue封装echarts组件
  • vue+echarts 封装组件

    2021-05-19 19:47:19
    vue+echarts 封装组件 一、首选安装echarts 使用命令npm install echarts 二、引入 import * as echarts from ‘echarts’; 三. 在父组件中引用 四、options的值是一个对象 存放的xAxis(x轴)数据,yAxis(y轴)的...
  • vue3使用echarts并封装echarts组件

    千次阅读 2022-03-18 21:24:34
    配置echarts二、使用echarts三、封装echarts组件 前言: 本文使用的echarts版本为5.3.1,详细文档可见: Echarts 官方文档 文中案例基于vue3编写,有关js部分使用的是"script setup"语法糖形式 一、安装并导入...
  • Vue中对echarts封装,使得代码更见简洁。
  • vue封装echarts组件,同一个页面多次调用后者被覆盖问题 在同一个页面多次调用封装的 echarts 组件,会出现后者的调用把前者的调用覆盖的情况,只要将获取 dom 元素的方式换成 ref 方式即可 为 ECharts 准备一个...
  • 在开发过程会经常使用到echarts进行可视化图表展示,针对echarts遇到的自适应尺寸,重复使用等问题,将其封装组件以便使用 组件目录如下 组件资源下载地址 default_option.js 里面封装我们平时开发echarts所使用...
  • vue+echarts组件封装

    2021-08-27 10:18:41
    本文是把echarts封装成一个公共组件,方便调用, 首先:先给echarts设置一个canvas画布,也就是俗称的div盒子 其次:下载echarts依赖,然后引入,如果报错的话就按照下面这种方式引入 macarons只是一个echarts...
  • (0)高度封装echarts,数据和el-table同步,不需要另外提供数据 Build Setup # install dependencies npm install # serve with hot reload at localhost:9527 npm run dev # build for production with minificat
  • Vue封装echarts组件

    2021-07-09 09:32:36
    这里的resize.js是大佬写的一个监听窗口缩放的的事件,index.js是全局注册的v-resize 自定义指令,在每个组件中都使用到了。 resize.js // 按钮权限判断指令 const resize = { inserted: (el, binding, vNode) =...
  • Vue封装echarts折线图组件

    千次阅读 2019-06-05 16:03:07
    最近项目中数据展示,需要引入n个相同的echarts,为了减少代码冗余,故封装一个组件。 1. 建两个.vue文件,关系为父子组件,如: analysis.vue(父组件),analysisChart.vue(子组件,也就是要封装的echart内容) 2. 父...
  • 基于vue 封装echarts 全局组件,柱状图,饼图,折线图
  • vue封装echarts组件实例

    万次阅读 2019-06-14 23:40:03
    App.vue的代码: <template> <div id="app"> <h1>this is App page</h1> <Eharts :echartObj="echartObj"></Eharts> </div> </template>...
  • 使用github上封装过的组件 github地址 https://github.com/ecomfe/vue-echarts npm & ESM $ npm install echarts vue-echarts 要在 Vue 2 下使用 vue-echarts,需要确保 @vue/composition-api 已经安装: npm i...
  • Vue封装echarts组件实例

    2019-12-12 11:07:16
    App.vue的代码: <template> <div id="app"> <h1>this is App page</h1> <Eharts :echartObj="echartObj"></Eharts> </div> </template> <script&...
  • 为什么要封装Echarts组件? 1.原生echarts不是vue组件风格的,不爽 2.原生echarts需要事先准备dom,麻烦 3.原生echarts没有响应式系统,太菜 原始使用步骤 1.安装并且引用echarts 安装命令:npm install ...
  • 将常见的echarts组件封装起来,例如柱形图、拼图、折线图,自己使用觉得实用简单,,不需要复杂初始化,引入组件给好id和相应的数据即可使用,一些常见的echarts属性和效果也封装起来了,比如xy轴的对换和值的显示...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,498
精华内容 1,399
关键字:

vue封装echarts组件