echarts柱状图、折线图

echarts

柱状图

series中的type设置为bar

柱状图.png

柱状图 常见效果

最大值 最小值 平均值

• markPoint 最大值 最小值

              markPoint: {
                    data: [
                        {
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },

• martLine 平均值

              markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },

数值的显示 柱宽度 横向柱状图

• label 数值的显示

              label: {
                    show: true,  //数值显示
                    rotate: 20,   //旋转角度
                    position: 'inside' //显示位置
                },

position参数可查官网Documentation - Apache ECharts

image.png

• barWidth 柱宽度

barWidth: '50%',  //柱宽度

• 更改x轴和y轴的角色 横向柱状图

       xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: xDataArr
        }
       

柱状图特点

• 柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况。

示例代码：

折线图

series中的type设置为line

折线图.png

折线图 常见效果

标记：最大值 最小值 平均值 标注区间

• markPoint 最大值 最小值、martLine 平均值 （使用同柱状图一样）
• 标注区间 markArea
  使用方法如下代码：

                  markArea: {
                        data: [
                            [
                                {
                                  xAxis: '1月'
                                },
                                {
                                    xAxis: '3月'
                                }
                            ],
                            [
                                {
                                    xAxis: '5月'
                                },
                                {
                                    xAxis: '7月'
                                }
                            ],
                        ]
                    },

image.png

线条控制：平滑 风格

• 平滑 smooth

smooth: true, //平滑

显示效果如下：

image.png

• 风格 lineStyle

lineStyle: {
  color: 'green',
  type: 'dashed' //dashed 虚线, dotted 点状线, solid 实线
}

image.png

填充风格 areaStyle

 areaStyle: {
    color: 'pink'
},

image.png

紧挨边缘 boundaryGap

• boundaryGap（ 让类别中的第一个元素紧挨y轴，设置给类目轴）

          xAxis: {
               type: 'category',
                data: xDataArr,
                boundaryGap: false  //默认值为true,不紧挨
            },

image.png

缩放：脱离0值比例 scale （ 设置给数值轴）

          yAxis: {
                type: 'value',
                scale: true
            },

image.png

堆叠图 stack

堆叠图是指多个系列的数据在同个类目轴上（同一X轴位置）进行叠加显示多系列数据和的柱状图或折线图（面积图）。堆叠图一般用在不追求突出两个或多个系列数据之间的差异性，而更关注于多系列数据的和在不同个类目轴上（不同X轴位置）的差异。
使用ECharts实现堆叠图非常简单容易，只需在配置信息series添加属性stack就可以实现堆叠图。stack属性值可以为任意字符串值，配置相同的stack值的系列可以堆叠放置。

let yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
let yDataArr2 = [90, 85, 70, 75, 90, 85, 75, 80]

        series: [
                {
                    name: '白象',
                    type: 'line',
                    areaStyle: {
                        color: 'pink'
                    },
                    data: yDataArr1,
                    stack:'all'
                },
                {
                    type: 'line',
                    name: '统一',
                    data: yDataArr2,
                    stack:'all',
                    areaStyle: {},
                }
            ]

image.png

折线图特点

• 折线图常用来分析数据随时间的变化趋势
  示例代码如下：