echarts柱状图属性

        虽然 Echarts官网： Apache ECharts 属性解释的很详细，但是刚开始写大屏的时候，的确因为不知道属性的专业名称耽误了很长时间去百度和搜索，所以整理了一下😁

        一、使用如下命令通过 npm 安装 ECharts

                npm install echarts --save（本文引入的echarts版本号为5.4.0）

        二、引入

                import * as echarts from "echarts"；引入 ECharts 中所有的图表和组件

        三、图表容器

        <template>

            <div class="box"> 

                <div id="echarts" class="echarts" style="width:500px;height:500px;margin:auto">

                 </div>

        <template>

 注意：容器的宽高需要设置

        四、基本柱状图

 五、属性设置

       柱状图的标题组件title的属性

       直角坐标系的X轴xAxis的属性

       直角坐标系的X轴yAxis的属性

       提示框组件tooltip组件的属性

       柱状图series-bar的属性

<template>
  <div class="box">
    <div id="echarts" class="echarts" style="width: 600px; height: 400px; margin: 58px auto"></div>
  </div>    
</template>
<script>
import { definecomponent,onBeforeUnmount, onMounted }from"vue' 
import * as echarts from 'echarts 
export default defineComponent(( 
    setup()
        let mycharts= null const init()=>{
        var dom = document.getElementById('echarts') mycharts = echarts.init(dom) 
        const option = { 
            tooltip:{//提示框组件
                trigger:'axis", //触发类型，"axis':坐标轴触发。主要是在柱状图、折线图等会使用类目轴的图表中使用;
            //"none':什么都不触发;'item":数据项图形触发，主要是在散点图，销图等无类目轴的图表中使用                                 
                showContent: true,//是否显示提示框 
                triggeron: 'mousemove',//提示框触发条件
            //'mousemove':鼠标移动时触发;click:鼠标点击时触发;'mousemove|click':鼠标移动和点击时触发;none:不触发
            //用户可以通过 action.tooltip.shoutip 和action.tooltip.hidetip来手动触发和隐藏。
        //也可以通过 axispointer.handle触发或隐藏。该属性为ECharts3.0中新加。 
            },
            title:{//标题组件
                show:'true’,//是否显示标题组件
                text: 'basic Chart',//主标题文本，支持使用'\n'换行 
                subtext: '基础柱状图',//副标题文本，支持使用'\n’换行 
                left:'center',//title组件离容器左侧的距离 
                link: '',//主标题文本超链接
                target: '', 
                //指定窗口打开主标题超链接，可选'self“当解窗口打开，"blank!新窗口打开    
                sublink: '',//副标题文木超链接    
                subtarget:'',
                //指定窗口打开副标题文本超链接。可选'self’当前窗口打开，“blank新窗口打开    
                borderColor:'',//标题边框的颜色 
                borderWidth:'',//标题的边框线宽 
                textstyle:{//主标题文本样式
                    color:'blue',    
                    width:'100'    ,
                    textBorderColor: 'red",//文字本身的描边颜色
                    textBorderType: 'solid',
                    //文字本身的描边类型。可选'solid",'dashed' , 'dotted"                  
                    textBorderWidth:10,//文字本身的描边宽度
                    overflow: "none',//文本超出宽度是否截断或者换行，配置width时有效。
                    //'truncate'阶段，并在末尾显示ellipsis,默认为...；'break'换行；
                },
                subtextstyle:{},//副标题文本样式 
                textAlign:'auto',//整体的水平对齐
            },
            xAxis:{
                type:'category',//坐标轴类型。'value':数值轴,用于连续数据;'category':类目轴;'time':时间轴，适用于连续的时序数据；'1og'：对数轴 
                data:[
                   {
                      value:'周一', 
                      textstyle:{//数据样式设置
                        fontsize: 20,    
                        color:'red',    
                       },
                    },

                    '周二','周三','周四','周五','周六','周日',
                ],
                show:true,//是否显示x轴
                name:'x轴',//坐标轴名称
                nameLocation: 'start',
                //坐标轴名称显示位置，可选'start'、'middle'或者"center’、'end',                     
                nameTextstyle:{//坐标抽名称样式 
                    color:'blue', 
                    fontsize:'2e',
                    nameGap:30,    /坐标轴名称与轴线之间的距离    
                    nameRotate: 30,//坐标轴名字旋转，角度值
                    inverse: true,//是否是反向坐标轴，默认为false
                    boundaryGap:true,//类目轴中，boundaryGap可以配置为true 和 false.
                    //默认true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间中间。                 
                  axisLine: {//坐标轴轴线相关设置 
                    linestyle:{//x坐标轴轴线的设置 
                        color: 'red',
                        type:'dashed',//线的类型。solid,dashed,dotted 
                    },
                    show: true//是否显示坐标轴轴线 
                  },
                  axistick:{
                    show: true,//是否显示坐标轴刻度
                    alignWithLabel: true,
                    //类日轴在boundaryGap为true的时候有效，可以保证刻度规和标签对齐 
                  },
                  axisLabel:{
                    show:true, 
                    interval:1,//坐标轴制度的显示间隔
                    inside: false,
                    //刻度标签是否朝内，默认为false朝外 
                    rotate:45,//刻度标签旋转的角度
                    margin:20,//刻度标签与轴线之间的距离
                    formatter: `{value}啦`,//刻度标签的内容格式。
                    color:'blue', 
                    fontStyle: 'bold', 
                 },
                 axisPointer:{
                    show: true,//总否显示坐标轴指示器，默认不显示，
                    type:'shadow',//指示器类型。'line'直线指示器;'shadow'阴影指示器;'none':无指示器 
                    lineStyle:{//指示器样式，只在axisPointer.type为'line时有效 
                        color: 'red', 
                        width: '2', 
                    },
                },
            },
            yAxis:{
                type:"value", 
                show: true,
            },
            series:[
                {
                    data:[120,200,150,80,70,110,130],
                    type:'bar',//柱状图
                    name:'柱状图',//系列名称
                    roundCap:'true',//是否在环形柱条两侧使用圆弧效果
                    barWidth:'20',//柱条宽度,不设置时自适应
                    barMaxWidth:'',//柱条的最大宽型，优先级高于barWidth    
                    barMinWidth:'',//柱条的最小宽度，优先级高于barWidth    
                    showBackground:'true'，//是否显示柱条的背景色。
                    backgroundstyle:{//配置背景样式
                        color:'',//柱条颜色    
                        borderColor:'',//柱条的描边颜色    
                        borderWidth:'',//柱条的描边宽度    
                        borderType:'',//柱条的描边类型 
                    },
                    label:{//图形的文本标签 
                        show: true,
                        distance: 5,//距离图形元素的距离 
                        rotate:'',//标签旋转
                    },
                    labelLine:{
                        show: true,//是否显示视觉引导线 
                        linestyle:{
                           color:'red', 
                           width:'1',
                        },
                    },

                    itemStyle:{//图形设置
                        color:'',//柱条颜色    
                    },
                emphasis:{//高亮的图形样式和标签样式
                    focus:'series',//在图形高亮时，是否谈出其他数据的图形以达到聚焦的效果.
                    //'none'不淡出其它图形，默认使用该配置，"self'只聚焦不淡出当前高亮数据            
                    blurScope:'coordinateStystem',
                    //在开启focus的时候，可以通过blurScope配置淡出的范围
                    //coordinatestystem淡出范围为坐标系，默认使用该配置;"series"淡出范围为系列;global淡出范围为全局 
                    label:{//图形上的文本标签 
                        show: true,
                        distance:5，//距离图形元素的距离 
                        rotate:'70'， //标签旋转
                    }
                },
            },
        ],
    },
    option && myCharts.setOption(option) 
}
onMounted(()=>{ init() })
onBeforeUnmount(() =>{
    if(!myCharts){return}
    myCharts.dispose() 
    myCharts = null
})
return { myCharts, init }
</script>