基于 echarts 封装的图表组件，支持图表的配置、图表响应式、解决图表宽度 100px 问题。

具体图表配置请参考官方文档：ECharts

基础使用

<lp-chart ref="lpChartRef" />

属性

属性名	类型	默认值	说明
width	Number	100%	宽
height	Number	300	高
watch	String	-	监听的元素选择器

方法

方法名	参数	返回值	说明
setOptions	options={}	-	渲染图表
emptyOptions	options={}	-	空图表
showLoading	options={}	-	开启图表 loading

setOptions options

参考 echarts 中的 options 配置项

emptyOptions options

属性名	类型	默认值	说明
text	String	暂无数据	文本
color	String	#0058D8	文本颜色

showLoading options

属性名	类型	默认值	说明
text	String	加载中...	文本
color	String	#0058D8	loading 颜色
textColor	String	#0058D8	文本颜色
maskColor	String	rgba(255, 255, 255, 0)	遮罩颜色

示例

使用 setOptions

通过传入 echarts 配置对象渲染图表

<template>
  <div>
    <lp-chart ref="lpChartRef" :height="500" />
  </div>
</template>

<script>
export default {
  name: "lp-vue",
  mounted() {
    this.$refs.lpChartRef.setOptions({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    });
  },
};
</script>

使用 emptyOptions

当没有数据的时候可以使用 emptyOptions 方法渲染空图表

<template>
  <div>
    <lp-chart ref="lpChartRef" :height="500" />
  </div>
</template>

<script>
export default {
  name: "lp-vue",
  mounted() {
    this.$refs.lpChartRef.emptyOptions({
      text: "没有获取到数据哦",
      color: "#f00",
    });
  },
};
</script>

使用 showLoading

当加载数据过长的时候可以使用 showLoading 方法开启图表 loading，当数据加载完成后再调用 setOptions 渲染图表会关闭 loading。

<template>
  <div>
    <lp-chart ref="lpChartRef" :height="500" />
  </div>
</template>

<script>
export default {
  name: "lp-vue",
  mounted() {
    this.$refs.lpChartRef.showLoading({
      text: "加载中...",
      color: "#f00",
      textColor: "#000",
      maskColor: "rgba(123, 144, 255, 0.5)",
    });
  },
};
</script>

使用 watch 监听元素

当图表切换时，图表会出现 100px 问题。是因为图表宽度为 100%的时候，由于父级元素显示隐藏（display:none）获取不到宽度就会默认设置宽度为 100，这个时候设置 watch 监听元素选择器，就会监听这个元素的显示隐藏，当显示的时候重新渲染图表。

<template>
  <div>
    <button @click="show = 'chart1'">图标一</button>
    <button @click="show = 'chart2'">图标二</button>
    <div>当前显示：{{ show }}</div>
    <div class="chart1" v-show="show == 'chart1'">
      <lp-chart ref="lpChartRef1" :height="500" />
    </div>
    <div class="chart2" v-show="show == 'chart2'">
      <lp-chart ref="lpChartRef2" :height="500" />
    </div>
  </div>
</template>

<script>
export default {
  name: "lp-vue",
  data() {
    return {
      show: "chart1",
    };
  },
  mounted() {
    this.$refs.lpChartRef1.setOptions({
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          areaStyle: {},
        },
      ],
    });
    this.$refs.lpChartRef2.setOptions({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    });
  },
};
</script>

这里创建了两个图表，通过按钮切换图表，当切换到图表二的时候，由于从 display:none 切换到 display:block，图表获取不到宽度，所以图表宽度为 100px。

这里就可以设置监听元素，因为知道是切换的 chart1 和 chart2，所以监听这两个元素，当显示的时候重新渲染图表。

<div class="chart1" v-show="show == 'chart1'">
  <lp-chart ref="lpChartRef1" :height="500" watch=".chart1" />
</div>
<div class="chart2" v-show="show == 'chart2'">
  <lp-chart ref="lpChartRef2" :height="500" watch=".chart2" />
</div>

这个时候就能正常显示了。