hightCharts 常用图表api

1. 渐变面积图配置

this.config = {
      chart: {
        height: 300, //高度
        backgroundColor: '#FFFFFF'//背景色
      },
      //标题
      title: {
        text: '' 
      },
      //图例
      legend: { 
        enabled: true, //true展示，false不展示
        //设定图例项的CSS样式。只支持有关文本的CSS样式设定。
        //默认是：{ "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "bold" }.
        itemStyle: {
          'fontSize': '14px',
          'fontFamily': "'PingFangSC-Regular', 'Microsoft YaHei'",
          'fontWeight': '400',
          'color': '#A6A6A6'
        },
        //当鼠标悬停在图例项上时，图例项样式可发生改变。此时，此配置用来实现对相应图例项的CSS样式设定。
        //只支持有关文本的CSS样式设定。样式属性继承并覆盖 style中的设定。 默认是：{ "color": "#000000" }.
        itemHoverStyle: {
          'fontSize': '14px',
          'fontFamily': "'PingFangSC-Regular', 'Microsoft YaHei'",
          'fontWeight': '400',
          'color': '#A6A6A6'
        },
        //设定图例标志宽度。当squareSymbol 属性设定后，此设定默认值取 symbolHeight，否则为16。
        symbolWidth: 11,
        //设定图例标志（图例中的符号）高度。默认与对应图例项字号相同。
        symbolHeight: 11,
        //图例标志和图例中的文本之间的像素距离。 默认是：5.
        symbolPadding: 6,
      },
      //
      tooltip: {
        shared: true,//数据提示框
        //为数据点提示框设置纯色或者渐变的背景色。在 CSS样式模式中，数据点提示框的描边宽度由.highcharts-tooltip-box类控制。
        //默认是：rgba(247,247,247,0.85).
        backgroundColor: "rgba(0,0,0,0.701)",
        //数据点提示框的边框颜色。 当该值为null时，边框会使用该数据列或该点的颜色。 默认是：null.
        borderColor: "rgba(0,0,0,0.701)",
        //数据点提示框圆角半径 默认是：3.
        borderRadius: 2,
        //是否使用HTML代码渲染提示框的内容用以代替SVG。使用HTML允许高级格式化，如在提示框中使用表格和图像。 默认是：false.
        useHTML: true,
        //为提示框添加CSS样式。提示框同样能够通过 CSS 类 .highcharts-tooltip 来设定样式。 
        //默认是：{ "color": "#333333", "cursor": "default", "fontSize": "12px", "pointerEvents": "none", "whiteSpace": "nowrap" }.
        style: {
          fontSize: "12px",
          fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
          color: "#FFFFFF",
          lineHeight: "17px",
        }
      },
      //X 轴（或分类轴）。
      //默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。
      xAxis: {
      //坐标轴类型。可以是 "linear", "logarithmic", "datetime" 或者 "category"之一，分别表示 “线性轴”、“对数轴”、“时间轴”、“分类轴”。
        type: "category",
        //坐标轴刻度线的长度。 默认是：10.
        tickLength: 0,
        //坐标轴刻度线的宽度，设置为 0 时则不显示刻度线。默认是：1
        tickWidth: 0,
        //坐标轴刻度线的颜色。默认是：#ccd6eb.
        tickColor: "#A6A6A6",
        //本参数只对分类轴有效。 当值为 on 时刻度线将在分类上方显示；当值为 between 时，刻度线将在两个分类中间显示。当 tickInterval 为 1 时，默认是 between，其他情况默认是 on。 默认是：null.
        tickmarkPlacement: 'on',
        //网格线线条宽度，当设置为 0 时则不显示网格线。
        gridLineWidth: 0,
        // 坐标轴轴线的颜色值。
        lineColor: "#A6A6A6",
        //坐标轴轴线的宽度。
        lineWidth: 0,
        //坐标轴标签，即在刻度位置显示对应的数值、名字或格式化后的内容。
        labels: {
          style: {
            fontSize: "12px",
            fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
            color: "#999999",
            lineHeight: "17px"
          }
        }
      },
      yAxis: [{
        gridLineColor: "#A6A6A6",
        gridLineDashStyle: 'Dot',
        gridLineWidth: 0,
        title: {text: ''},
        labels: {
          format: '{value}',
          style: {
            fontSize: "12px",
            fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
            color: "#A6A6A6",
            lineHeight: "17px"
          }
        }
      }, {
        gridLineColor: "#A6A6A6",
        gridLineDashStyle: 'Dot',
        gridLineWidth: 0,
        opposite: true,
        startOnTick: true,
        title: {text: ''},
        labels: {
          style: {
            fontSize: "12px",
            fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
            color: "#999999",
            lineHeight: "17px"
          }
        }
      }],
      plotOptions: {
        series: {
          fillOpacity: 0.15,
          lineWidth: 2
        }
      },
      series: [{
        type: 'area',
        name: '舆情指数',
        color: '#B75F13',
        yAxis: 1,
        lineColor: "#B75F13",
        // lineWidth:2,
        // fillOpacity:0.2,
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, 'rgba(250,217,97,0.1)'],
            [1, 'rgba(247,107,28,0)']
          ],
        },
        marker: {
          enabled: false
        },
        states: {
          hover: {
            lineWidth: 2,
            lineWidthPlus: 0
          }
        }
      }, {
        type: 'area',
        name: '近期情绪平均值',
        color: '#FBFBFB',
        lineColor: "#FBFBFB",
        yAxis: 1,
        // lineWidth:2,
        // fillOpacity:0.3,
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, 'rgba(233,140,0,1)'],
            [1, 'rgba(0,0,0,0)']
          ],
        },
        marker: {
          enabled: false
        },
        states: {
          hover: {
            lineWidth: 2,
            lineWidthPlus: 0
          }
        }
      }],
    };

getChart = () => {
    let {data1, data2, data3, data4} = this.state;
    let config = JSON.parse(JSON.stringify(this.config));
    let tooltip = {
      pointFormatter: function () {
        return '<span  style="color:' + this.series.color + '"/>●</span>' + this.series.name + ': ' + this.y + "<br/>";
      }
    };
    let tooltipTwo = {
      pointFormatter: function () {
        return '<span  style="color:' + this.series.color + '"/>●</span>' + this.series.name + ': ' + this.y + "<br/>";
      }
    };
    // config.xAxis.tickInterval = data1.length > 5 ? parseInt(data1.length / 5) : 1;
    config.series[0].data = data1;
    config.series[1].data = data2;
    config.yAxis[1].max = utils.fixed(Math.max.apply(Math, data3));
    config.yAxis[1].min = utils.fixed(Math.min.apply(Math, data4));
    config.series[0].tooltip = tooltip;
    config.series[1].tooltip = tooltipTwo;

    return (
      <Fragment>
        <ChartBox style={this.chartStyle} chartId={"basic-info-chart"} config={config}/>
      </Fragment>
    )
  }

样例数据：

data1 = [ ["2018-10-11", 7.1],["2018-10-12", 6.5],["2018-10-13", 8.4],["2018-10-14", 9.2],["2018-10-15", 7.5],["2018-10-16", 6.6],["2018-10-17", 10.7]]

2. 饼图配置

const config = {
            chart: {
                type: 'pie',
                backgroundColor: '#191F28',
                height: 260,
                borderWidth: 0
            },
            tooltip: {
                style: {fontSize: '10px;'},
                backgroundColor: "rgba(0,0,0,0.701)",
                borderColor: "rgba(0,0,0,0.701)",
                borderRadius: 2,
                useHTML: true,
                headerFormat: '{point.key}<br>',
                pointFormat: '收入：{point.y}亿<br>占比：{point.rate}% ',
                style: {
                    fontSize: "12px",
                    fontFamily: "'PingFangSC-Regular', 'Microsoft YaHei'",
                    color: "#FFFFFF",
                    lineHeight: "17px",
                }
            },
            legend: {
                enabled: true
            },
            series: [{
                type: 'pie',
                data: this.state.dataSource,
                innerSize: '77%',
                dataLabels: {
                    connectorPadding: 0,//标签和线之间的距离
                    enabled: false
                },
                states: {
                    hover: {
                        enabled: false,
                        halo: {
                            // opacity:1,//突出部分的透明度
                            // attributes:{

                            // },
                            // marker:{
                            //     fillColr:'white'
                            // }
                        }
                    }
                },
                colors: pieColorList
            }],
            title: ''
        };