@zxst/echart

更多API和建议，请参阅文档

安装：

npm install @zxst/echart
或
yarn add @zxst/echart

全局引入：

import ZxstEcharts from '@zxst/echart'
Vue.use(ZxstEcharts)

Demo示例：

<template>
  <el-main>
	<el-row :gutter="15">
	  <el-col :lg="8">
	    <el-card shadow="never">
	      <ZxPie height="300px" :option="option"></ZxPie>
	    </el-card>
	  </el-col>
	  <el-col :lg="8">
	    <el-card shadow="never">
	      <ZxEcharts height="300px" :option="option2"></ZxEcharts>
	    </el-card>
	  </el-col>
	  <el-col :lg="8">
	    <el-card shadow="never">
	      <ZxEcharts height="300px" :option="option3"></ZxEcharts>
	    </el-card>
	  </el-col>
	</el-row>
  </el-main>
</template>

<script>
/**
 * 引入组件 @zxst/echarts
 * 组件内部会自动加载主题 @zxst/echarts/echarts-theme-T.js
 * 支持props包括 height，option
 * 组件export百度Echarts所有方法:
 */
export default {
  name: 'chart',
  data() {
    return {
      option: {
        title: {
          text: 'Bar Demo',
          subtext: '基础柱状图'
        },
        grid: {
          top: '80px'
        },
        tooltip: {
          trigger: 'axis'
        },
        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',
            barWidth: '15px'
          },
          {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: 'bar',
            barWidth: '15px'
          }
        ]
      },
      option2: {
        title: {
          text: 'Line Demo',
          subtext: '基础折线图'
        },
        grid: {
          top: '80px'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line'
          },
          {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: 'line'
          }
        ]
      },
      option3: {
        title: {
          text: 'Pie Demo',
          subtext: '基础饼图'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '60%'],
            label: false,
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ]
          }
        ]
      }
    };
  }
};
</script>