echarts 柱状图

Posted 2020-12-22 web-zs

结构:

let chart = echarts.init($(‘.container‘)[0])

let option = {}

chart.setOption(option);

 

option内容:

1.提示语

        tooltip: {
            trigger: ‘axis‘,
            axisPointer: {
                type: ‘shadow‘    或者 线性 "line" 
            }
        },

2.标题

       title: {
            // text: ‘内容‘,
            textStyle: {
                fontSize: 14,
                color:‘#E99122‘,
                fontWeight:‘normal‘,
            },
            left: ‘left‘
        },

3.X轴

        xAxis: {
            type: ‘value‘,
            // 去掉默认的网格线
            splitLine: {
                show: false
            },
            axisLine:{
                lineStyle:{
                    width:1,
                }
            },
            splitNumber : 2,  //分为几个间隔
            max:680,  //最大值
        },

4.Y轴

        yAxis: {
            type: "category", 
            data: [‘①‘, "②", "③", "④", ‘⑤‘,‘⑥‘],
            axisTick: {
                alignWithLabel: true  //刻度对齐
            },
            axisLine:{
                lineStyle:{  //y轴线的样式
                    width:1,
                    color:‘#5C595B‘
                }
            }
        },

5.直角坐标系的位置

        grid:{
            left:‘15%‘,
        },

6.数据

        series: [{
            type: ‘bar‘,
            barWidth: 7,
            data: [190, 400, 140, 280, 340, 470],
            itemStyle: {
                narmal: {
                    color: "#250333"
                }
            }
        }]