开发背景
新需求需要使用echarts和vue开发,在开发的过程中,发现网上已有的组件不符合自己的需求,所以准备自己开发一个。
经历了两版,第一版的写完之后每次传递给子组件的时候需要一堆数据,所以今天在第一版的基础上开发了第二版。
第一版
ecahrts组件
<template>
<div :id="id" :style="style" class="chartcom"></div>
</template>
<script>
export default {
name: 'chart',
data () {
return {
chart: ''
}
},
props: {
id: {
type: String
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
},
margin: {
type: String,
default: '0 auto'
},
option: {
type: Object,
default () {
return {
title: {
text: 'vue-Echarts'
},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', 'tuoxie']
},
series: [
{
name: