echarts笔记


一些奇怪的echarts样式实现记录,点击链接可以在echarts官网看到详情例子。

radar(雷达图)

// 径向渐变位置
var height = document.querySelector('#chart-panel').offsetHeight; 
var width = document.querySelector('#chart-panel').offsetWidth;
var radiusMax = width >= height ? height : widht;
var data = {
    title: '承办科室或社区(办结率)排名',
    ratioData: [{
            value: '95',
            name: '1'
        },
        {
            value: '90',
            name: '党群工作办公室'
        },
        {
            value: '85',
            name: '3'
        },
        {
            value: '63',
            name: '4'
        },
        {
            value: '48',
            name: '5'
        },
        {
            value: '35',
            name: '6'
        },
        {
            value: '32',
            name: '7'
        },
        {
            value: '26',
            name: '8'
        },
        {
            value: '17',
            name: '民生保障办公室'
        },
    ]
};//原始数据
var indicator = [];//雷达数据
var showData = [];//展示数据
if (data.title !== undefined) {
    data.ratioData.map(item => {
        indicator.push({
            name: item.name,
            max: 100

        });
        showData.push(Number(item.value));
    });
}

option = {
    backgroundColor:"#000",//背景色
    title: {
        text: `{title|${data.title}}`,
        show: true,
        backgroundColor: {
            type: "linear",
            colorStops: [{
                offset: 0,
                color: "#47b1b6"
            }, {
                offset: 1,
                color: "transparent"
            }]//标题渐变
        },
        textStyle: {
            color: "#fff",
            rich: {
                title: {
                    color: "#fff",
                    fontSize: 18,
                    width: width,
                }
            }
        },
    },//标题
    radar: {
        indicator: indicator,
        shape: "circle",//形状
        center: ["50%", "53%"],//位置
        radius: "85%",//大小
        splitNumber: 5,//刻度
        splitArea: {
            areaStyle: {
                color: ["transparent"]//背景透明
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                opacity: 1,
                color: "#263c5f",
                width: 3,
            }
        },
        axisLine: {
            show: false,
        },
        name: {
            show: false,
        }
    },//雷达图数据
    series: [{
        name: data.title,
        type: "radar",
        symbolSize: 0.1,
        areaStyle: {
            normal: {
                opacity: 1,
                color: new echarts.graphic.RadialGradient(width / 2, height / 2, radiusMax * 0.3, [{
                    offset: 0,
                    color: 'rgb(61, 171, 204,0.2)'
                }, {
                    offset: 1,
                    color: 'rgb(61, 171, 204,1)'
                }], true),
            }//渐变
        },
        lineStyle: {
            width: 0,
        },
        label: {
            normal: {
                show: true,
                position: "top",
                formatter: (params) => {
                    let dataIndex = params.data.indexOf(params.value);
                    let rang = `NO.${dataIndex+1}`;
                    let value = `${params.value}%`;
                    let name = indicator[dataIndex].name;
                    let text = '';
                    if (dataIndex < 3) {
                        text = `{value|${value}}{rang|${rang}}{name|${name}}`;
                    } else {
                        text = `{name|${name}}{value|${value}}`;
                    }
                    return text;
                },
                rich: {
                    rang: {
                        color: "#02ba5f",
                        fontSize: 16,
                    },
                    value: {
                        color: "#00FFFF",
                        fontWeight: 700,
                        fontSize: 16,
                    },
                    name: {
                        color: "#fff",
                        padding: [0, 5],
                        fontSize: 14
                    }
                }
            }
        },
        data: [showData],
    }]
};

var chart = document.getElementById('chart-panel');
echarts.init(chart);

柱状图

  • 动态数据
    在这里插入图片描述
    动态柱状图分为两种,一每次添加一个数据,柱状图呈现滚动效果,二每隔一段时间替换一次所有数据,柱状图呈现消失生成效果。两者大同小异,都是为柱状图设置一个定时器,间隔刷新数据。代码简单易懂,我就不解释了。
var provincialData=[
    {id: "089", name: "新疆", value: 0},
    {id: "088", name: "宁夏", value: 0},
    {id: "070", name: "青海", value: 0},
    {id: "087", name: "甘肃", value: 0},
    {id: "084", name: "陕西", value: 0},
    {id: "079", name: "西藏", value: 0},
    {id: "086", name: "云南", value: 0},
    {id: "085", name: "贵州", value: 0},
    {id: "081", name: "四川", value: 0},
    {id: "083", name: "重庆", value: 0},
    {id: "050", name: "海南", value: 0},
    {id: "059", name: "广西", value: 0},
    {id: "051", name: "广东", value: 0},
    {id: "074", name: "湖南", value: 0},
    {id: "071", name: "湖北", value: 0},
    {id: "075", name: "江西", value: 0},
    {id: "038", name: "福建", value: 0},
    {id: "030", name: "安徽", value: 0},
    {id: "036", name: "浙江", value: 0},
    {id: "034", name: "江苏", value: 0},
    {id: "031", name: "上海", value: 0},
    {id: "000", name: "", value: 0},
    {id: "076", name: "河南", value: 0},
    {id: "017", name: "山东", value: 0},
    {id: "097", name: "黑龙江", value:0},
    {id: "090", name: "吉林", value: 0},
    {id: "091", name: "辽宁", value: 0},
    {id: "010", name: "内蒙古", value: 0},
    {id: "019", name: "山西", value: 0},
    {id: "018", name: "河北", value: 0},
    {id: "013", name: "天津", value: 0},
    {id: "011", name: "北京", value: 0}
    ];
option = {
    backgroundColor:"#000",
      grid:[{
        y2:"60%",
      },{
          y:"42%",
          
      }],
      xAxis: [
        {
          type: 'category',
          show:false,
          boundaryGap: true,
          gridIndex:0,
          data: (()=>{
            const res = [];
            for (let len=0;len<30;len+=1) {
              res.push(len);
            }
            return res;
          })()
        },{
        type: 'value',
        show: false,
        gridIndex:1,
        boundaryGap: [0, 0.2],
      }
      ],
      yAxis: [
        {
          type: 'value',
          scale: true,
          show:false,
          gridIndex:0,
          boundaryGap: [0, 0.2]
        },{
        type: 'category',
        gridIndex:1,
        data: provincialData.map(item=>item.name),
        axisTick: {
          show:false,
        },
        axisLine: {
          show:false,
        },
        axisLabel: {
          show: true,
          color: '#fff',
          interval:0
        }
      }
      ],
      series: [
        {
          name:'',
          type:'bar',
          barWidth:12,
          xAxisIndex:0,
          yAxisIndex:0,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00feff'
                },
                  {
                    offset: 0.5,
                    color: '#027eff'
                  },
                  {
                    offset: 1,
                    color: '#0286ff'
                  }
                ]
              )
            }
          },
          data:( ()=>{
            const res = [];
            for (let len=30;len>0;len-=1) {
              res.push(0);
            }
            return res;
          })()
        },{
        barWidth: 12,
        type: 'pictorialBar',
        symbol: 'roundRect',
        xAxisIndex:1,
        yAxisIndex:1,
        symbolRepeat: true,
        symbolSize: [12, 8],
        itemStyle: {
          normal: {
            barBorderRadius: [0,30,30,0],
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1, [{
                offset: 0,
                color: '#00feff'
              },
                {
                  offset: 0.5,
                  color: '#027eff'
                },
                {
                  offset: 1,
                  color: '#0286ff'
                }
              ]
            )
          }
        },
        data: provincialData.map(item=>item.value),
      }
      ]
    };
    setInterval(()=>{
      const axisData = option.xAxis[0].data;
      option.series[0].data.shift();
      option.series[0].data.push(Math.random()*1000);
      option.xAxis[0].data.shift();
      option.xAxis[0].data.push(axisData[axisData.length-1]+1);
      for(var i=0;i<provincialData.length;i++){
          if(provincialData[i].name!==''){
              provincialData[i].value=Math.random()*1000;
          }
      }
      option.series[1].data=provincialData;
      
      myChart.setOption(option);
    }, 300);

散点图

  • 分块
    在这里插入图片描述
    主要是markPoint的使用:
// 以该点[xValue,yValue]为中心划分
// Number.MAX_VALUE为数据最大值
markArea: {
            zlevel: 0,
            silent: true,
            data: [
                [{
                    // 右下
                        name: "低发展、高流失",
                        itemStyle: {
                            color: "#e0f8ed"
                        },
                        label: {
                            show: true,
                            position: ["30%", "50%"],
                            fontStyle: "normal",
                            color: "#66cc66",
                            fontSize: 14
                        },
                        coord: [xValue, yValue]
                    },
                    {
                        coord: [Number.MAX_VALUE, 0]
                    }
                ],
                [{
                    //做下
                        name: "低发展、低流失",
                        itemStyle: {
                            color: "#fef0e0"
                        },
                        label: {
                            show: true,
                            position: ["10%", "50%"],
                            fontStyle: "normal",
                            color: "#66cc66",
                            fontSize: 14
                        },
                        xAxis: 0,
                        yAxis: 0
                    },
                    {
                        xAxis: xValue,
                        yAxis: yValue
                    }
                ],
                [{
                    // 右上
                        name: "高发展、高流失",
                        itemStyle: {
                            color: "#ffebe9"
                        },
                        label: {
                            show: true,
                            position: ["30%", "10%"],
                            fontStyle: "normal",
                            color: "#66cc66",
                            fontSize: 14
                        },
                        xAxis: xValue,
                        yAxis: yValue
                    },
                    {
                        xAxis: Number.MAX_VALUE,
                        yAxis: Number.MAX_VALUE
                    }
                ],
                [{
                   // 左上
                        name: "高发展、低流失",
                        itemStyle: {
                            color: "#eee5fe"
                        },
                        label: {
                            show: true,
                            position: ["10%", "10%"],
                            fontStyle: "normal",
                            color: "#66cc66",
                            fontSize: 14
                        },
                        xAxis: 0,
                        yAxis: Number.MAX_VALUE
                    },
                    {
                        xAxis: xValue,
                        yAxis: yValue
                    }
                ]
            ]
        },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值