hightchart 圆柱体

hightchart 圆柱体_第1张图片

      initwarnHchartUp(id){
        let option = {
          //水印
          credits: {
            enabled: false
          },
          //说明的位置
          legend: {
            itemMarginTop: 10,
            itemMarginBottom: 10,
            layout: 'vertical',
            align: 'right',
            itemGap: 30,
            verticalAlign: 'middle',
            x: -10, //距离x轴的距离
            y: -17, //距离Y轴的距离
          },
          chart: {
            type: 'cylinder',
            options3d: {
              enabled: true,
              alpha: 18,
              beta: 0,
              depth: 50,         //图表的合计深度,默认为100
              viewDistance: 15   //定义图表的浏览长度
            },
            marginTop: 30,
            marginRight: 100,
            marginBottom:40,
          },

          colors: ['#1DA8DB', '#36CD8F', '#CFC823', '#DB8427',],
          title: {
            text: ''
          },
          xAxis: {
            categories: ['南平', '宁德', '三明', '福州', '莆田', '龙岩', '泉州', '厦门', '漳州'],
            lineWidth: 10, //x轴线
            tickWidth: 0,//刻度
            labels: {
              y: 20, //x轴刻度文字向下移动
              style: {
                color: '#2E9DC0',//颜色
                fontSize: '16'  //字体dao
              }
            },
            title: {
              enabled: true,
              text: '单位:  个',
              style: {
                fontWeight: 'normal'
              },
              x:-370,
              y:-220,
            },
            gridLineWidth: 0,  //x轴网格线
          },
          yAxis: {
            tickPositions: [0, 2, 4, 6, 8, 10], // 指定竖轴坐标点的值
            labels: {
              style: {
                fontSize: '10'  //字体dao
              },
              formatter: function () {
                if (this.value <= 10) {
                  return this.value
                }
              }
            },
            plotBands: [{
              from: 1,               // 标示带开始值
              to: 2,                 // 标示带结束值
              label: {              // 标示带文字标签配置,详见API
              },
              color: '#F2F7F7',            // 标示带背景颜色
              borderWidth: 2,        // 标示带边框宽度
              borderColor: "#F2F7F7",        // 标示带边框颜色
              id: 1,                 // 标示带 id,用于删除等操作
              zIndex: -1,              // 标示带层叠,用于调整显示层次
            }, {
              from: 3,               // 标示带开始值
              to: 4,                 // 标示带结束值
              label: {              // 标示带文字标签配置,详见API
              },
              color: '#F2F7F7',            // 标示带背景颜色
              borderWidth: 2,        // 标示带边框宽度
              borderColor: "#F2F7F7",        // 标示带边框颜色
              id: 2,                 // 标示带 id,用于删除等操作
              zIndex: -1,              // 标示带层叠,用于调整显示层次
            }, {
              from: 5,               // 标示带开始值
              to: 6,                 // 标示带结束值
              label: {              // 标示带文字标签配置,详见API
              },
              color: '#F2F7F7',            // 标示带背景颜色
              borderWidth: 2,        // 标示带边框宽度
              borderColor: "#F2F7F7",        // 标示带边框颜色
              id: 3,                 // 标示带 id,用于删除等操作
              zIndex: -1,              // 标示带层叠,用于调整显示层次
            }, {
              from: 7,               // 标示带开始值
              to: 8,                 // 标示带结束值
              label: {              // 标示带文字标签配置,详见API
              },
              color: '#F2F7F7',            // 标示带背景颜色
              borderWidth: 2,        // 标示带边框宽度
              borderColor: "#F2F7F7",        // 标示带边框颜色
              id: 4,                 // 标示带 id,用于删除等操作
              zIndex: -1,              // 标示带层叠,用于调整显示层次
            }, {
              from: 9,               // 标示带开始值
              to: 10,                 // 标示带结束值
              label: {              // 标示带文字标签配置,详见API
              },
              color: '#F2F7F7',            // 标示带背景颜色
              borderWidth: 2,        // 标示带边框宽度
              borderColor: "#F2F7F7",        // 标示带边框颜色
              id: 5,                 // 标示带 id,用于删除等操作
              zIndex: -1,              // 标示带层叠,用于调整显示层次
            }],
            gridLineWidth: 0,  //y轴网格线
            allowDecimals: false,
            min: 0,
            title: {
              text: ''
            }
          },

          tooltip: {
            headerFormat: '{point.key}
', pointFormat: '\u25CF {series.name}: {point.y} / {point.stackTotal}' }, plotOptions: { column: { borderWidth: 0, pointWidth: 5, //柱子宽度 }, series: { //注意:当此处为series是针对所有图表类型有效 depth: 25, dataLabels: { enabled: true, //显示数量提示 formatter: function () { return this.y; //返回百分比和个数 }, style: { font: "18px", color: '#4C9BA8', } } } }, series: [{ name: '风险预警单', data: [9, 9, 9, 9, 9, 9, 9, 9], stack: 'male' }, { name: '已落实', data: [7, 7, 7, 7, 7, 7, 7, 7], stack: 'male' }] } var chart = Highcharts.chart(id, option); },

你可能感兴趣的:(hightchart 圆柱体)