.net图表之ECharts随笔08-bar柱状图

之前一直都是跟着修改demo，感觉用得很吃力，现在结合上配置手册就好很多了，其实说到底就是参数的配置，所以配置手册尤为重要。

当然，这其中还是很多坑，希望可以找到对应的解决方案吧！！！

1. tooltip.formatter：设置鼠标进入柱状图形时的显示文本。

    可以传入一个函数，同时传入参数params，此参数的name表示数据名，一整条柱状图形对应的坐标轴类别名，value表示数据值。

    也可以传入字符串，更方便，{a}表示系列名即series中的name，{b}表示数据名同函数中参数的name，{c}表示数据值

2. grid：设置整个坐标轴的属性。

    show：设置是否显示坐标轴最外层边框。这个grid的效果时有时无，暂时未找到原因。show:'true',borderWidth:'0'——百度出来的这个配置有用~

    width表示整个坐标轴的宽度，grid.x表示坐标轴距离父容器左侧的距离

3. xAxis/yAxis

    splitLine.show：设置与坐标轴的平行网格线是否显示

    nameTextStyle.color：设置坐标轴名称的字体颜色

    axisLabel.textStyle：设置坐标轴刻度的文本样式

    axisLabel.textStyle.color：设置坐标轴刻度的字体颜色，xAxis/yAxis.axisLabel.textStyle.fontSize：设置坐标轴刻度的字体大小

    axisLabel.formatter：设置坐标轴刻度文本显示格式，可以传入一个函数，同时传入参数params，此参数即是显示字符串

    axisLabel.interval：设置坐标轴刻度显示数量形式，默认auto，即避免重叠显示。设置为0即强制显示全部刻度，不管是否重叠

    注意：axisTick.interval在官方文档中也说可以设置，但是放在xAxis/yAxis中却无效！！！

    axisLine.symbol：设置为['none','arrow']可以显示坐标系箭头

6. series：设置柱状图的数据与样式

    stack：设置多个柱状图形并排，stack相同的两个柱状图形将显示在一条直线上，属于同一个系列

    itemStyle.normal.barBorderRadius：设置柱状图形的四个边角是否为弧形

    itemStyle.normal.color：设置柱状图形的颜色

        可以通过赋值为new echarts.graphic.LinearGradient()设置渐变颜色。亲测有效。前面提到的all.js这个里面是没有这个方法的，只有min.js的才有

            先说说前四个参数，简称左上右下，值一般是0或者1。左表示，从右到左渐变，上表示从下到上渐变，...以此类推。

            第五个参数就是设置颜色的。这是一个列表，列表中每个元素表示一种渐变色。元素的参数：

               offset表示颜色显示位置，color表示显示颜色

    barWidth：设置柱状图形的宽度

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有