<template> <div class="Consumption"> <div style="width: 350px; height: 180px" ref="ConsumptionChart" /> </div></template><script>import echarts from 'echarts'const myShape = { x: 0, y: 0, width: 10 //间距}// 绘制左侧面const InclinedRoofBar = echarts.graphic.extendShape({ shape: myShape, buildPath: function(ctx, shape) { // 会canvas的应该都能看得懂，shape是从custom传入的 const xAxisPoint = shape.xAxisPoint const c0 = [shape.x, shape.y] const c1 = [shape.x + 14, shape.y - 10] const c2 = [xAxisPoint[0], xAxisPoint[1] - 10] const c3 = [xAxisPoint[0], xAxisPoint[1]] ctx .moveTo(c0[0], c0[1]) .lineTo(c1[0], c1[1]) .lineTo(c2[0], c2[1]) .lineTo(c3[0], c3[1]) .closePath() }})const colors = ['rgba(50, 197, 255, 0.8)', 'rgba(0, 253, 255, 0.8)', 'rgba(255, 235, 0, 0.8)']const colorss = ['rgba(0, 145, 255, 1)', 'rgba(68, 215, 182, 1)', 'rgba(215, 170, 68, 1)']// 注册三个面图形echarts.graphic.registerShape('InclinedRoofBar', InclinedRoofBar)const defaultOption = { tooltip: { show: true, trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { top: 10, bottom: 30, left: 10, right: 10, containLabel: true }, yAxis: { type: 'category', data: [], axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color(value, index) { return colorss[index] }, fontSize: 14 } }, xAxis: { type: 'value', axisLine: { show: false }, min: 0, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, boundaryGap: ['20%', '20%'] }, series: [ { type: 'custom', name: '', itemStyle: { color: 'rgba(44, 197, 253, 1)' }, renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]) const xlocation = api.coord([0, api.value(1)]) return { type: 'InclinedRoofBar', shape: { api, xValue: api.value(0), yValue: api.value(1), x: location[0], y: location[1] + myShape.width, xAxisPoint: [xlocation[0], xlocation[1] + myShape.width] }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: colors[params.dataIndex] }, { offset: 1, color: colorss[params.dataIndex] } ]) } } }, data: [] }, { type: 'bar', label: { normal: { show: true, position: 'right', fontSize: 14, offset: [15, 0] } }, showBackground: false, barWidth: 14, backgroundStyle: { color: 'rgba(50, 197, 255, 0.1)' }, itemStyle: { color: 'transparent' }, tooltip: { show: false }, data: [] } ]}export default { data() { return { myChart: null } }, mounted() { this.myChart = echarts.init(this.$refs.ConsumptionChart) }, methods: { getOption(seriesData) { const option = defaultOption const { yAxis, series } = option // 处理数据 yAxis.data = ['低', '中', '高'] series[0].data = seriesData series[1].data = seriesData.map((item, index) => Object.assign(item, { label: { color: colorss[index] } })) this.myChart.setOption(option) } }}</script>
