vue柱状图x轴文字、垂直在柱子顶部 - echart图表

刘斩仙的笔记本

已于 2022-08-09 15:49:53 修改

阅读量982

点赞数 1

分类专栏：图表（echarts）文章标签： echarts css html

于 2021-09-13 16:19:20 首次发布

本文链接：https://blog.csdn.net/qq_25252769/article/details/120269584

版权

图表（echarts）专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客展示了如何使用 ECharts 框架创建一个柱状图，其中 x 轴数据包含换行标签。通过 `mounted` 生命周期钩子和 `window.onresize` 事件监听窗口变化以实现图表的自适应重载。`vertical` 方法用于将连续字符转换为带有换行的字符串，使标签在图表中更易读。同时，配置了图表的样式，包括颜色渐变、边框、坐标轴细节等。此外，还定义了高亮状态下柱子的颜色变化。

摘要由CSDN通过智能技术生成

如图所示：

代码：

<template>
  <div class="ml20 mr20 mb20 colorFOp">
    <div class="head tc mb20 ">测试案例</div>
      <div ref="test" class="testChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myTestChart:{},
    };
  },
  mounted() {
    this.testChart()
    window.onresize = ()=>{ //窗口变化自动重载
      this.myTestChart.resize()
    }
  
  },
  methods: {
    //添加\n换行符
    vertical(params){ 
      const txtArry = params.split('');
      let rs = "";
      txtArry.map(item => {
        rs += item + "\n"
      })
      return rs;
    },
    testChart(){
      this.myTestChart = echarts.init(this.$refs.test);
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '10',
          right: '20',
          bottom: '30',
          top:'20',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            //实际使用：['1月','2月'].map(item => this.vertical(item))
            data: Array.from({length:12},(v,k)=>this.vertical(`${k+1}月 自诩人间第一流`)),
            axisTick:{
              show:false,
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#fff',//边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              show:true,
              inside: true,
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
                fontSize:'10'
              },
            },
            position: "top",
            z: 10
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine:{
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            showBackground: true,//展示背景
            itemStyle: { //柱子颜色
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#00C4FF'},
                  {offset: 0.5, color: '#0F7AAE'},
                  {offset: 1, color: '#00023A'}
                ]
              ),      
              //normal: { //值垂直在柱子底部
				//	barBorderRadius: 5,
				//	label:{
				//		show:true,
				//		position: "insideBottom",
				//		textStyle: { //数值样式
				//			color: '#333333',
				//			fontSize: 11
				//		},
				//		formatter:(val) => {
				//			return `${this.vertical(val.value)}`
				//		},
				//	}
				//}              
            },
            emphasis: {//鼠标经过状态柱子颜色
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#00023A'},
                    {offset: 0.7, color: '#0F7AAE'},
                    {offset: 1, color: '#00C4FF'}
                  ]
                )
              }
            },
          
            barWidth : 25,//柱图宽度
            data: [711,322,733,411,222,444,666,555,333,222,444,888]
          },
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myTestChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
  .testChart{
    margin:100px auto;
    width:850px;
    height: 50vh;
  }
  .title{
    font-size: 16px;
    color: #00F8FD;
    line-height: 42px;
  }
</style>