feat:横向柱状图

components/HorizontalBar/HorizontalBar.vue

 <template>
 	<view>
-		横向柱状图
+		<uni-ec-canvas
+			class="uni-ec-canvas"
+			id="line-chart"
+			ref="canvas"
+			canvas-id="lazy-load-chart"
+			:ec="ec"
+		></uni-ec-canvas>
 	</view>
 </template>
 
 <script>
-	export default {
-		name:"HorizontalBar",
-		data() {
-			return {
-				
-			};
+import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas'
+import * as echarts from '@/components/uni-ec-canvas/echarts'
+import echartElementData from '@/mixins/echartElementData.js'
+let chart = null
+
+export default {
+	name:"HorizontalBar",
+	mixins: [echartElementData],
+  data () {
+    return {
+      ec: {
+        lazyLoad:true
+      }
+    }
+  },
+  onReady () {
+    
+  },
+  components: {
+    uniEcCanvas
+  },
+	methods: {
+		initChart() {
+			this.$nextTick(() => {
+				this.$refs['canvas'].init((canvas, width, height, canvasDpr) => {
+					chart = echarts.init(canvas, null, {
+						width: width,
+						height: height,
+						devicePixelRatio: canvasDpr
+					})
+					canvas.setChart(chart)
+					const { dataList: { categories, series } } = this.elementData
+					const options = {
+						...this.elementInfo.option,
+						tooltip: {},
+						yAxis: {
+							...this.elementInfo.option.yAxis,
+							data: categories
+						},
+						series: this.dealSeriesData(series)
+					}
+					chart.setOption(options)
+					return chart
+				})
+			})
+		},
+		/**
+		 * 处理数据
+		 */
+		dealSeriesData (data) {
+			if(!data) return
+			const newData = data.map(item => {
+				const config = {
+					type: 'bar',
+					...this.elementInfo.option.bar,
+					label: {
+						...this.elementInfo.option.dataset,
+						formatter: val => {
+							return converFunction(this.elementInfo.option.dataset.formatter, val)
+						}
+					}
+				}
+				return { ...item, ...config }
+			})
+			return newData
 		}
 	}
+}
 </script>
-
-<style>
-
+<style scoped>
+.uni-ec-canvas{
+	width: 750rpx;
+	height: 750rpx;
+	display:block;
+}
 </style>