column: with multi settings

带配置项的柱状图

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="//unpkg.com/v-charts/lib/index.min.js"></script>

<div id="app">
  <ve-histogram :data="chartData" :extend="chartExtend" :settings="chartSettings"></ve-histogram>
</div>

JavaScript

const COLOR_LIST = ['#ff0', '#0f0', '#0ff', '#f00']
new Vue({
  el: '#app',
  created: function () {
    this.chartData = {
      columns: ['date', 'cost'],
      rows: [
        { 'date': '1月1日', 'cost': 1523 },
        { 'date': '1月2日', 'cost': 1223 },
        { 'date': '1月3日', 'cost': 2123 },
        { 'date': '1月4日', 'cost': 4123 },
        { 'date': 'as', 'cost': 4123 },
        { 'date': 'asd', 'cost': 4123 }
      ]
    }
    this.chartSettings = {}
		this.chartExtend = {
		  series (item) {
				console.log(item)
				item[0].data = item[0].data.map((v, index) => ({
					value: v,
					itemStyle: { color: COLOR_LIST[index] }
				}))
				return item
			}
		}
   }
})