vue-xchart v1.1.0

使用说明

安装

npm install vue-xchart echarts -S

在vue中使用

1.在main.js中引入

// main.js
import xchart from 'vue-xchart'
import echarts from 'echarts'
import 'vue-xchart/lib/x-chart.css'
import Theme from 'vue-xchart/theme/index'
Theme(echarts)
Vue.prototype.$echarts = echarts
Vue.use(xchart)

2. 使用对应的模块 (柱状图为例)

//使用组件
<template>
   <x-bar
   :chartData="barData"
   ></x-bar>  //组件使用是x-xxx
</template>

<script>
export default {
  data(){
    return{
      barData:{
        columns: ['time', 'water', 'gas'],
        rows: [
          {time: '1-1', water: '20', gas: '40'},
          {time: '1-2', water: '20', gas: '40'},
          {time: '1-3', water: '20', gas: '40'},
          {time: '1-4', water: '20', gas: '40'}
        ],
      }
    }
  }
}
</script>

2. 数据传递

   属性	数据类型	默认传递项	说明
   chartWidth	String	100%	图形宽度
   chartHeight	String	400px	图形高度
   chartData	Object	{ columns: [], rows: [] })	传递数据
   chartData/rows	Array	[]	画图数据(包含 x 轴线显示数据)
   chartData/columns	Array	[]	需要画图的选项(第一个数据为 x 轴显示数据)
   settings	Object	{}	特殊配置项数据(一些特殊的配置项，方便修改)
   extend	Object	{}	修改配置项(根据 echats 官网的 option 配置,修改画图的配置)

settings 配置说明

1.柱状图

2.折线图

3.圆饼图