echarts笔记

最新推荐文章于 2024-02-29 14:26:57 发布
最新推荐文章于 2024-02-29 14:26:57 发布
阅读量270 收藏 1
点赞数
分类专栏： echarts 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36209248/article/details/89317851
版权

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
    评论
专栏目录
ECharts数据可视化学习笔记（温故而知新）
qq_64510496的博客
07-14 169
ECharts是一个使用JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
echarts工作笔记
weixin_42450794的博客
10-18 152
轴线的名字 轴线的样式 xAxis: { type: 'category', name:'时间', axisLine:{ lineStyle:{ color: '#f74c4c' } } }, 轴线显示tooltip lineChart.dispatch...
Echarts笔记
weixin_68540347的博客
02-14 969
Echarts笔记
echarts学习笔记
m0_59029708的博客
10-27 941
提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
Echarts 笔记
2301_77585245的博客
06-08 157
ECharts 是一个使用 JavaScript 将数据通过图表的形式展现出来的"数据可视化"库, 它可以流畅的运行在 PC 和移动设备上。
echarts常用图形笔记
hahai_的博客
02-29 961
1、折线图的基本属性用法。外半径可以设置为环形图。
pyechart笔记
热衷开源的Boy
05-16 355
添加标题from pyecharts import options as opts bar添加数据要使用列表
echarts笔记.zip
09-09
在"echarts笔记.zip"这个压缩包中，我们可以推测包含的是一份关于ECharts的学习笔记或教程，可能涵盖了ECharts的基础使用方法、高级特性以及实战案例等内容。这份笔记可能会帮助我们深入理解并熟练掌握ECharts的各个...
echarts笔记。。。
04-09
echarts笔记。。。
Echarts基础教程学习笔记
11-14
Echarts基础教程学习笔记，Echarts简介、课程介绍、技能、设备、网络环境的要求和建议
Echarts样例+个人笔记
11-03
Echarts有这样难吗？Echarts样例+个人笔记，在项目组专注于Echarts，经过这几个月的积累，现将个人笔记及案例奉上，希望对echarts初学者和初级开发者有所帮助！里面有别人开发中碰到的常见echarts样式调整代码！
echarts练习笔记
最新发布
03-11
在“echarts练习笔记”这个项目中，我们可以看到两个主要的文件夹：`templates`和`static`。这表明项目是围绕着构建一个Web应用进行的，其中`templates`通常用于存放HTML模板文件，而`static`则用于存放不随应用程序...
echarts 学习笔记 文档
02-26
echarts 学习笔记 文档
echarts自定义工具栏
菜鸟猿小天
12-08 2798
自定义工具栏：将折线图变为柱状图 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, toolbox: ...
【Echarts】学习笔记
小管打天下的博客
09-12 400
/ 注意：在setup执行的时候，ref还没有绑定到节点上面，可以通过onMounted节点挂着完成、nextTick进入下一轮再执行。第三个参数是额外配置，比如渲染器的选择(canvas，svg)，svg性能更高。学习建议：先选择要使用的案例，删掉没用的属性，剩下不懂的属性可以去查看文档。// 因为内部是通过 export xxx 导出的，所以用 * 接收。// 因为内部是通过 export xxx 导出的，所以用 * 接收。// 3. 设置配置，并且开始配置。"ECharts 入门示例"
ECharts笔记
nailsoul的专栏
05-12 1065
ECharts笔记简介实例潇湘阁2020年销售数据代码效果图hystrix bashboard代码效果图资料文献RUNOOB->Echarts教程官网饼图列子 简介 ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 实例 潇湘阁2020年销售数据 一条先　数据分区间　不同区间显示不同颜色 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8
Echarts柱状图实例教程：快速上手与配置详解
Echarts笔记总结是一份针对Echarts图表库的详细介绍文档，特别侧重于通过实例来教授读者如何使用。该文档的核心内容围绕柱状图的创建和配置展开，旨在帮助新手快速上手并理解Echarts的功能。首先，我们来看看Title...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值