echarts 柱状图 渐变色_柱状图简单特效篇

柱状图(Bar)和折线图(Line)是最基本的图表，在echarts里面有一个工具按钮可以切换柱状图和折线图。

柱状图官方例子 折线图官方例子

基本柱状图

这里使用一个最基本的Bar的配置

export const IBarStardard = {
  xAxis: {
type: 'category',
    data: []
  },
  yAxis: {
type: 'value'
  },
  series: [{
    data: [],
type: 'bar'
  }]
};

使用的时候如下所示

    this.Sample.xAxis.data = ['唐三', '戴沐白', "马红骏", "奥斯卡", "小舞", "宁荣荣", "朱竹清"];
this.Sample.xAxis["axisLabel"] = { interval: 0, rotate: 45 }
this.Sample.series[0].data = [50, 100, 150, 70, 80, 120, 90];

注意点：如果你的柱状图的每个项目太窄的话，下面的X轴的坐标不是每个都会显示的。这个时候，我们需要设定 "axisLabel"的interval(间隔数)为0，表示X轴坐标不要间隔表示，同时设定rotate为45度，兼顾了可读性和空间位置。

彩虹柱状图

彩虹图的基本思想是通过设定itemStyle来为每个项目设定颜色。(注意，itemStyle大小写敏感！！！) 这里在展示彩虹图的同时，还展示了如何在数据顶部显示标签。下面的colorList的颜色只是随手写的，无任何实际意义。

    this.RainbowSample.series[0]['itemStyle'] = //定义每个bar的颜色和其上是否显示值
    {
      normal: {
        color: function (params) {
// build a color map as your need.
//定义一个颜色集合
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
          ];
//对每个bar显示一种颜色
return colorList[params.dataIndex]
        },
        opacity:0.5,
        borderType:'dotted',
        label: {
//每个bar的最高点值显示在bar顶部
          show: true,
          position: 'top',
//值和x轴分类的显示格式(这里是换行显示)
          formatter: '{b}\n{c}'
        }
      },
      emphasis:{
        opacity:1
      }
    }

color支持使用回调函数。回调函数格式如下：(params: Object) => Color 传入的是数据项 seriesIndex, dataIndex, data, value 等各个参数。

如果我们想根据值来设定不同的颜色，我们可以改写回调函数：

        color: function (params) {
// build a color map as your need.
//定义一个颜色集合
var colorList = [
'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
          ];
//100以上和100以下用不同颜色表示
return (params.value > 100)?colorList[0]:colorList[1];
        },

注意：配色是一门学问，特别是彩虹图，颜色太过于杂乱，美学会有问题，可以参考一些配色网站：Echarts数据可视化实验室配色方案

黑色主题

修改backgroundColor和坐标文字颜色，达到黑色主题的效果

    this.RainbowSample_Dark["backgroundColor"] = '#000000',//背景色
this.RainbowSample_Dark.xAxis.data = ['唐三', '戴沐白', "马红骏", "奥斯卡", "小舞", "宁荣荣", "朱竹清"];
this.RainbowSample_Dark.xAxis["show"] = false;
this.RainbowSample_Dark.yAxis["axisLabel"] = {color:"#FFFFFF"};
this.RainbowSample_Dark.series[0].data = [50, 100, 150, 70, 80, 120, 90];

渐变色

接下来看看如何实现渐变色，这里需要使用echarts内置的渐变色类LinearGradient。这里注意Angular如何引入echarts这个类。

    import * as echarts from 'echarts';

this.GradientSample.xAxis.data = ['唐三', '戴沐白', "马红骏", "奥斯卡", "小舞", "宁荣荣", "朱竹清"];
this.GradientSample.xAxis["show"] = false;
this.GradientSample.series[0].data = [50, 100, 150, 70, 80, 120, 90];
this.GradientSample.series[0]['itemStyle'] = //定义每个bar的颜色和其上是否显示值
    {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#000000'
        }, {
          offset: 1,
          color: '#FFFFFF'
        }]),
      }
    }

itemStyle中的emphasis和normal

这里可以对普通的项目和强调项目进行不同的设定，所谓的强调项目是指鼠标悬停的项目。例如上面的设定普通的项目，透明度opacity是0.5，强调项目的透明度是1.

tooltip

当鼠标悬停在柱状图上，我们还可以显示一些信息或者图案。

    this.Sample_dark_GradientSample['tooltip'] = {
trigger: 'item',
formatter: this.SpotToolTip,
position: 'inside',
    }

这里的formatter就是显示内容的回调函数,这个函数支持返回一些HTML语句。关于参数，请参阅文档或者通过console打印出来，找到自己想要的值。

  SpotToolTip(val: any) {

let url = "assets/image/" + val.name + "/头像.jpg";
return '

'
+ val.name
+ '

'
+ ''" />';
}


状态图的option代码如下所示：

 this.Sample_dark_GradientSample["backgroundColor"] = '#000000';//背景色
this.Sample_dark_GradientSample.xAxis.data = ['唐三', '戴沐白', "马红俊", "奥斯卡", "小舞", "宁荣荣", "朱竹清"];
this.Sample_dark_GradientSample.xAxis["show"] = false;
this.Sample_dark_GradientSample.yAxis["axisLabel"] = { color: "#FFFFFF" };
this.Sample_dark_GradientSample.series[0].data = [50, 100, 150, 70, 80, 120, 90];
this.Sample_dark_GradientSample.series[0]['itemStyle'] = //定义每个bar的颜色和其上是否显示值
    {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#32D3EB'
        }, {
          offset: 1,
          color: '#FCCE10'
        }]),
        opacity: 0.75,
        label: {
          color: '#FEB64D',
//每个bar的最高点值显示在bar顶部
          show: true,
          position: 'top',
//值和x轴分类的显示格式(这里是换行显示)
          formatter: '{b}\n{c}'
        }
      }
    }
this.Sample_dark_GradientSample['tooltip'] = {
      trigger: 'item',
      formatter: this.SpotToolTip,
      position: 'inside',
    }

所有代码可以在github上找到：

https://github.com/magicdict/VisLab