diff --git a/src/components/heat.vue b/src/components/heat.vue index cdca888..9e1e81b 100644 --- a/src/components/heat.vue +++ b/src/components/heat.vue @@ -9,7 +9,7 @@ export default { data() { return { xData: ['2022/10/11', '2022/10/12', '2022/10/13', '2022/10/14', '2022/10/15', '2022/10/16', '2022/10/17'], //横坐标 - yData: [23, 24, 18, 25, 27, 28, 25], //数据 + yData: [10, 24, 18, 25, 27, 28, 25], //数据 myChartStyle: { float: 'left', width: '100%', height: '400px' }, //图表样式 } }, @@ -20,10 +20,6 @@ export default { initEcharts() { // 基本柱状图 const option = { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#00fffb' }, //0 起始颜色 - { offset: 1, color: '#0061ce' }, //1 结束颜色 - ]), tooltip: { trigger: 'item', }, @@ -90,11 +86,25 @@ export default { }, series: [ { - type: 'bar', //形状为柱状图 data: this.yData, - barWidth: 20, - }, - ], + type: 'bar', + showBackground: true, + barWidth: 40, + backgroundStyle: { + color: 'rgba(180, 180, 180, 0.2)' + }, + itemStyle: { + normal: { + //这里是颜色 + color: function(params) { + //注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色 + var colorList = ['#CCCCCC']; + return colorList[params.dataIndex] + } + } + } + } + ] } const myChart = echarts.init(document.getElementById('mychart')) myChart.setOption(option) diff --git a/src/page/Home.vue b/src/page/Home.vue index 0e5f368..c17f299 100644 --- a/src/page/Home.vue +++ b/src/page/Home.vue @@ -24,7 +24,7 @@ + class="el-menu-vertical-demo" style="background-color: dodgerblue;display: flex;width: 100%" router>