zoukankan      html  css  js  c++  java
  • echarts 柱状图

    结构:

    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:{
                        1,
                    }
                },
                splitNumber : 2,  //分为几个间隔
                max:680,  //最大值
            },

    4.Y轴

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

    5.直角坐标系的位置

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

    6.数据

            series: [{
                type: 'bar',
                barWidth: 7,
                data: [190, 400, 140, 280, 340, 470],
                itemStyle: {
                    narmal: {
                        color: "#250333"
                    }
                }
            }]
  • 相关阅读:
    线程的异常捕获与线程池的异常捕获
    设计模式-状态模式
    老王讲自制RPC框架.(四.序列化与反序列化)
    老王讲自制RPC框架.(三.ZOOKEEPER)
    老王讲自制RPC框架.(二.动态代理)
    4
    3
    2
    1
    前言
  • 原文地址:https://www.cnblogs.com/web-zs/p/12975142.html
Copyright © 2011-2022 走看看