ECharts 示例——基础柱状图：包含常规组件

当前ECharts版本为5.1.2。

概述

按照其他可视化工具中柱状图的默认样式，对ECharts基础柱状图进行如下设置：

• 标题，副标题：设置居中，修改字体大小
• 图例：设置图例位置
• 工具栏：显示工具栏
• 背景色：设置为白色
• 坐标轴标签：设置居中显示、标签与轴间距
• 数据标签：顶部显示
• 网格线：显示网格线
• 提示框：显示提示框
  

配置项

option = {
    //设置提示框
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    //添加工具栏
    toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: "none"
          },
          dataView: {
            readOnly: false
          },
          magicType: {
            type: ["line", "bar"]
          },
          restore: {},
          saveAsImage: {}
        }
    },
    //设置背景色
    backgroundColor:"#FFFFFF",
    //设置标题
    title: {
        text:"样例",
        subtext:"副标题",
        left:"center",
        textStyle: {
          fontSize: 24
        },
        subtextStyle: {
          fontSize: 20
        }
    },
    //设置图例
    legend: {
        left:"5%"
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        //设置轴标签属性
        name: "星期",
        nameLocation: "middle",
        nameGap:30,
        axisTick: {
            alignWithLabel: true
        },
        //设置网格线属性
        splitLine: {
            show: true,
            lineStyle:{
               color: ['#EEE'],
               width: 1,
               type: 'solid'
          }
    　　}
    },
    yAxis: {
        type: 'value',
        //设置轴标签属性
        name: "利润（万元）",
        nameLocation: "middle",
        nameGap:50
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220],
            //设置数据标签属性
            label: {
                position: "outside",
                show: true
            }
        }
    ]
};