1、echarts 柱状图如何排序?
下面这个index设置不管用
datasetIndex: 1
2、排序之后如何根据高低给每个柱条设置不同的颜色?visualMap这个吗?
有这个错加上之后,Error in nextTick: "SyntaxError: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('undefined') could not be parsed as a color."
完整代码:
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '450px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
console.log('销售数量',this.chartData.Brand.amountData)
},
setOptions({
brandNameData,
amountData,
timeAxisFieldData
} = {}) {
this.chart.setOption({
dataset: [{
dimensions: ['品牌名称', 'date', '销售数量'],
source: this.chartData.Brand.amountData,
// source: [
// ['MilkTea', '2011', 58],
// ['Tea', '2011', 12],
// ['Miea', '2011', 212]
// ]
},
{
transform: {
type: 'sort',
config: {
dimension: '销售数量',
order: 'asc'
// order: 'desc'
}
}
},
],
xAxis: {
name: '销售数量',
axisLabel: {
interval: 0,
rotate: 30
},
},
yAxis: {
name: '品牌名称',
type: 'category',
},
// visualMap: {
// orient: 'horizontal',
// left: 'center',
// min: 0,
// max: this.chartData.Brand.salesVolumesMax,
// // max: this.chartData.Brand.salesVolumesMax,
// text: ['高', '低'],
// dimension: 0,
// inRange: {
// color: ['#65B581', '#FFCE34', '#FD665F']
// }
// },
series: {
type: 'bar',
encode: {
x: '销售数量',
y: '品牌名称'
},
datasetIndex: 1
// itemStyle: {
// normal: {
// color: function (params) {
// // 给出颜色组
// var colorList = ['#cca272', '#74608f'];
// //循环调用
// return colorList[params.dataIndex % colorList.length];
// }
// }
// }
}
})
}
}
}
</script>