使用说明

安装

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.柱状图

| 配置项 | 数据类型 | 代码演示 | 说明 | | :--: | :--: | :--: | :--: | | theme | String | 'drak' | 更新主题 | | legendName | Object | { water: '水'} | 修改 legend 显示的样式 | | myAxis | Object | 传递以下三个值 | 设置 y 轴的配置 | | axisSite | Object | { right: ['fire'] } | 设置双 y 轴 | | axisType | Array | ['normal', '%'] | 设置数据的属性,normal：默认,K：千,%：百分比 | | axisName | Array | ['值', '比率'] | 设置 y 轴的名称 | | label | Object | {show: true,position: 'top'} | 设置数据是否显示(默认不显示)和显示的位置 | | switchAxis | Object | {axis: 'yAxis'} | 切换数据的显示轴线位置(参数为:yAxis 或 xAxis) | | stack | Object | {总和: ['water', 'gas']} | 选择合并递增显示的数据 | | xAxisType | String | 'value' | 设置 x 轴的 type 值 |

2.折线图

| 配置项 | 数据类型 | 代码演示 | 说明 | | :--: | :--: | :--: | :--: | | theme | String | 'drak' | 更新主题 | | legendName | Object | { water: '水'} | 修改 legend 显示的样式 | | myAxis | Object | 传递以下三个值 | 设置 y 轴的配置 | | axisSite | Object | { right: ['fire'] } | 设置双 y 轴 | | axisType | Array | ['normal', '%'] | 设置数据的属性,normal：默认,K：千,%：百分比 | | axisName | Array | ['值', '比率'] | 设置 y 轴的名称 | | label | Object | {show: true,position: 'top'} | 设置数据是否显示(默认不显示)和显示的位置 | | stack | Object | {总和: ['water', 'gas']} | 选择合并递增显示的数据 | | xAxisType | String | 'value' | 设置 x 轴的 type 值 | | area| Boolean| true| 是否显示堆叠面积(默认不显示)| | smooth | Boolean或String或Number | true | 设置弯曲值(范围:0-1) true为0.5 |

3.圆饼图

| 配置项 | 数据类型 | 代码演示 | 说明 | | :--: | :--: | :--: | :--: | | theme | String | 'drak' | 更新主题 | | name | String | 'name' | 设置圆环图的名称 | | selected | String,Boolean | 'single' | 选中模式(默认为false,其他值:true,'single','multiple') | | radius | String,Array | '50%' | 设置半径(数组情况下可以设置圆环图) | | center | Array | [ '50%','50%' ] | 设置图形位置(相对于x,y轴的位置) | | roseType | String,Boolean | 'radius' | 是否展示成南丁格尔图(默认是false,其他值'radius','area') | | more | Array | [ [ '1-1','1-2' ] , [ '1-1','1-2','1-3' ] ] | 多圆饼图时设置 |