码迷,mamicode.com
首页 > 其他好文 > 详细

echarts 柱状图

时间:2020-05-27 18:43:38      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:idt   title   nts   number   items   orm   category   标题   ems   

结构:

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"
                }
            }
        }]

 

echarts 柱状图

标签:idt   title   nts   number   items   orm   category   标题   ems   

原文地址:https://www.cnblogs.com/web-zs/p/12975142.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!