zoukankan      html  css  js  c++  java
  • .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:设置柱状图形的宽度

  • 相关阅读:
    使用SharePoint文档库需注意的问题
    Windows 2003 lassess.exe 系统错误
    使用javascript 实现.net 验证控件功能
    NetAdvantage For .NET全新推出 2008 Volume 2 版加强了对web图表的支持
    Aspose.Total 发布Q12010第一季度版
    FastReport VCL4.9发布
    StimulReport.Net报表控件推介
    .NET Reactor超高性价比的混淆器
    TeeChartfor.NET 全面支持VisualStudio2010和.NET Framework4.0 (控件中国网)
    Dundas Dashboard V2.0仪表盘控件的发布
  • 原文地址:https://www.cnblogs.com/Rombo713/p/10094865.html
Copyright © 2011-2022 走看看