echarts几种图表应用

最新推荐文章于 2024-07-05 14:48:18 发布
最新推荐文章于 2024-07-05 14:48:18 发布
阅读量131 收藏
点赞数
分类专栏： 前端 文章标签： echarts react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_hx10/article/details/121288541
版权

Echarts

柱形图

const xData: ["收录信息1", 收录信息2", "收录信息3", "收录信息4"],
const  legendData: [
      {
        name: "未读",
        num: 25,
        rate: "25%"
      },
      {
        name: "已读",
        num: 75,
        rate: "75%"
      }
    ]
const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        orient: "vertical",
        top: "3%",
        right: "0%",
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
          color: "rgba(0,0,0,.85)",
          fontSize: 14
        },
        // data: legendData,
        formatter: function(name) {
          let num = 0;
          legendData.map((i) => {
            if (name == i.name) {
              num = i.num;
            }
          });
          // console.log(name)
          return "{a|" + name + "}" + " " + "{b|" + num + "条" + "}" + " " + "{b|" + num + "%" + "}";
        },
        textStyle: {
          color: "#000",
          fontSize: 14,
          lineHeight: 18,
          rich: {
            a: {
              fontSize: 14,
              // fontWeight: 400,
              color: "#000",
              lineHeight: 14
            },
            b: {
              fontSize: 14,
              // fontWeight: "bold",
              color: "#737373",
              lineHeight: 14
            }
          }
        }
      },
      grid: {
        //图表的位置
        top: "25%",
        left: "8%",
        right: "15%",
        bottom: "11%"
      },
      yAxis: [
        {
          name: "总数（条）",
          nameTextStyle: {
            color: "rgba(0,0,0,0.65)"
          },
          type: "value",
          axisLabel: {
            show: true,
            color: "rgba(0,0,0,.45)",
            interval: "auto",
            formatter: "{value} "
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "#e7eaf0",
              type: "dashed"
            }
          },
          show: true
        }
      ],
      xAxis: [
        {
          name: "公告类型",
          nameTextStyle: {
            color: "rgba(0,0,0,0.65)"
          },
          type: "category",
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#e7eaf0"
            }
          },
          axisLabel: {
            interval: 0,
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#000"
            }
          },
          data: xData
        }
      ],
      series: [
        {
          name: "已读",
          type: "bar",
          stack: "sum",
          barWidth: "20px",
          data: hasRead,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: "#3295FF"
                },
                {
                  offset: 0,
                  color: "#81BEFF"
                }
              ])
            }
          }
        },
        {
          name: "未读",
          type: "bar",
          barWidth: "20px",
          stack: "sum",
          itemStyle: {
            normal: {
              barBorderRadius: [2, 2, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: "#FFC53E"
                },
                {
                  offset: 0,
                  color: "#FFF88F"
                }
              ])
            }
          },
          data: noRead
        }
      ]
    };

在这里插入图片描述

饼状图

var data = [
{
        name: '2018级',
        value: 255,
        itemStyle: {
          normal: { //颜色渐变
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: '#81BEFF',
              },
              {
                offset: 1,
                color: '#3295FF',
              }
              ]
            )
          }
        }
      },
      {
        name: '2019级',
        value: 103,
        itemStyle: {
          normal: { //颜色渐变
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: '#FECC84',
              },
              {
                offset: 1,
                color: '#FF983E',
              }
              ]
            )
          }
        }
      },
      {
        name: '2020级',
        value: 80,
        itemStyle: {
          normal: { //颜色渐变
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: '#70F3C2',
              },
              {
                offset: 1,
                color: '#48D69E',
              }
              ]
            )
          }
        }
      },
      {
        name: '2021级',
        value: 33,
        itemStyle: {
          normal: { //颜色渐变
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [{
                offset: 0,
                color: '#9F9BFF',
              },
              {
                offset: 1,
                color: '#826CFF',
              }
              ]
            )
          }
        }
      }
];

const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
      },
      legend: {
        orient: "vertical",
        // right: "10%",
        left: "60%",
        top: "25%",
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
          fontSize: 14,
          lineHeight: 18,
        }
      },
      series: [
        {
          type: 'pie',
          data: data,
          label: {
            show: false
          },
          radius: ["0%", "60%"],
          center: ['30%', '50%'],
          itemStyle: {
            borderWidth: 2,
            borderColor: "#fff"
          },
        }
      ]
    };

在这里插入图片描述

进度条圆环

var value = {"name":"在用课程数","rat": 45,"num":5326};
option = {
    backgroundColor: '#fff', //背景颜色
    title: [  //标题显示
        {
            text: value["rat"] + '%',
            subtext: value["name"],
            left: "center",
            top: "43%",
            textStyle: {
              fontSize: 50,
              color: '#397EF0',
            },
            subtextStyle: {
              fontSize: 30,
              color: '#000',
            }
          }
    ],
    legend:{
        orient: 'vertical',
        right: 200,
        top: 500,
        formatter: function (v) {
            // console.log(v)
            return  v +' '+ value["rat"]+'%';
        },
    },
    polar: {  //圆环显示
        radius: ['40%', '35%'],
        center: ['50%', '50%'],
    },
    angleAxis: {
        max: 100,
        // clockwise: false, //刻度增长是否按顺时针
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
        splitLine: {
            show: false,
        },
    },
    radiusAxis: {  //极坐标系的径向轴
        type: 'category',
        // show: true,
        // axisLabel: {
        //     show: false,
        // },
        axisLine: {
            show: false,
        },
        // axisTick: {
        //     show: false,
        // },
    },
    series: [
        {
            type: 'pie',
            radius: [0, '30%'],
            animation : false,
            itemStyle: {
                normal: {
                    color: '#EAF1FD',
                    
                }
            },
            silent: true, //图形是否不响应和触发鼠标事件
            label: {
                show: false
            },
            data: [100]
        },
        
        {
            name: value["name"],
            type: 'bar',
            roundCap: true,
            //  animation : false,
            z: 2,
            showBackground: true,
            backgroundStyle: {
                color: '#EAF1FD',
            },
            data: [value["rat"]],
            coordinateSystem: 'polar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, .5, 1, [
                        {
                            offset: 0,
                            color: '#3295FF',
                        },
                        {
                            offset: 1,
                            color: '#81BEFF',
                        },
                    ]),
                },
            },
        },
    ],
};

在这里插入图片描述

进度条

···
option = {
grid: {
left: ‘5%’,
right: ‘5%’,
bottom: ‘5%’,
top: ‘10%’,
containLabel: true,
},
// backgroundColor: ‘#101129’,
xAxis: {
show: false,
type: ‘value’,
max: 1520,
},
yAxis: [
{
type: ‘category’,
inverse: true,
axisLabel: {
show: true,
textStyle: {
fontSize: ‘12’,
color: ‘#03fcfe’,
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
{
type: ‘category’,
inverse: true,
axisTick: ‘none’,
axisLine: ‘none’,
show: true,
data: [1520],
},
],
series: [
{
type: ‘bar’,
showBackground: true,
backgroundStyle: {
color: ‘rgba(231,234,240,0.45)’,
borderRadius:10
},
label:{
show:true,
position:‘right’,
padding: [3,0,0,-35],
formatter:’{@score}’,
textStyle: {
color: ‘#fff’,
fontSize: ‘12’,
},
verticalAlign: “middle”
},
itemStyle: {
normal: {
barBorderRadius: 10,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: ‘#4EE7F9’,
},
{
offset: 1,
color: ‘#3295FF’,
},
]),
},
},
barWidth: 20,
data: [500],
},
],
};
···
在这里插入图片描述

地图

const option = {
            tooltip: {
                trigger: 'item'
            },
            visualMap: {
                min: 0,
                max: 2500,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: false,
                left: 10,
                itemWidth: 8,
                itemHeight: 60,
                color: ['#7babfb', '#e1eeff']
            },
            series: [
                {
                    name: '各省**分布',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    emphasis: {
                        label: {
                            show: true,
                            color:"#fff",
                        },
                        itemStyle:{
                          areaColor:"#315b9b"  
                        }
                    },
                    itemStyle: {
                        borderColor: "#fff"
                    },
                    data: [
                        { name: '北京', value: Math.round(Math.random() * 1000) },
                        { name: '天津', value: Math.round(Math.random() * 1000) },
                        { name: '上海', value: Math.round(Math.random() * 1000) },
                        { name: '重庆', value: Math.round(Math.random() * 1000) },
                        { name: '河北', value: Math.round(Math.random() * 1000) },
                        { name: '河南', value: Math.round(Math.random() * 1000) },
                        { name: '云南', value: Math.round(Math.random() * 1000) },
                        { name: '辽宁', value: Math.round(Math.random() * 1000) },
                        { name: '黑龙江', value: Math.round(Math.random() * 1000) },
                        { name: '湖南', value: Math.round(Math.random() * 1000) },
                        { name: '安徽', value: Math.round(Math.random() * 1000) },
                        { name: '山东', value: Math.round(Math.random() * 1000) },
                        { name: '新疆', value: Math.round(Math.random() * 1000) },
                        { name: '江苏', value: Math.round(Math.random() * 1000) },
                        { name: '浙江', value: Math.round(Math.random() * 1000) },
                        { name: '江西', value: Math.round(Math.random() * 1000) },
                        { name: '湖北', value: Math.round(Math.random() * 1000) },
                        { name: '广西', value: Math.round(Math.random() * 1000) },
                        { name: '甘肃', value: Math.round(Math.random() * 1000) },
                        { name: '山西', value: Math.round(Math.random() * 1000) },
                        { name: '内蒙古', value: Math.round(Math.random() * 1000) },
                        { name: '陕西', value: Math.round(Math.random() * 1000) },
                        { name: '吉林', value: Math.round(Math.random() * 1000) },
                        { name: '福建', value: Math.round(Math.random() * 1000) },
                        { name: '贵州', value: Math.round(Math.random() * 1000) },
                        { name: '广东', value: Math.round(Math.random() * 1000) },
                        { name: '青海', value: Math.round(Math.random() * 1000) },
                        { name: '西藏', value: Math.round(Math.random() * 1000) },
                        { name: '四川', value: Math.round(Math.random() * 1000) },
                        { name: '宁夏', value: Math.round(Math.random() * 1000) },
                        { name: '海南', value: Math.round(Math.random() * 1000) },
                        { name: '台湾', value: Math.round(Math.random() * 1000) },
                        { name: '香港', value: Math.round(Math.random() * 1000) },
                        { name: '澳门', value: Math.round(Math.random() * 1000) }
                    ]
                },

            ]
        };

在这里插入图片描述

w_hx10
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 柱状立体图
weixin_46463643的博客
11-27 691
options: { backgroundColor: '#28467c', tooltip: { trigger: 'axis', formatter: '{b} : {c}', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } ..
echarts 车间图表
11-02
ECharts 是一个基于 JavaScript 的数据可视化库，广泛应用于各种类型的图表绘制，如您所提到的“车间图表”。它由百度开发并开源，提供丰富的图表类型，包括但不限于圆形图、柱状图、百分比图和折线图。这些图表在...
通过Echarts怎样实现立体柱状图
weixin_55123102的博客
02-22 6284
大家好，我是梁木由。之前在做大屏可视化项目时，UI设计了一个立体形状的柱状图，根据之前做的一些图表的项目没有能复用的，没有做过这种立体形状的图表，打开echarts也没看到有相关的demo，看下如何实现`
echarts - 自定义形状 - 实现立体柱状图
qq_35432583的博客
05-13 4228
如果需要复杂的图表样式，echarts 自带的 series 类型无法满足，那么就可以使用 custom 类型，这时就需要通过 canvas 手动绘制图表的形状了。
echarts 实现形状为圆柱形、三角形的柱状图表
来杯卡布奇诺的博客
05-16 646
PS：上面柱状图背景是添加了一个柱形图实现的。柱形图 bar 可以通过 backgroundStyle 来实现背景，象形柱图 pictorialBar 没有找到直接设置的方法，有知道可以下面留言。，是一种可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。外观上是一个圆柱形，实际上是由一个柱形图和两个象形柱图拼接而成。这个图实际上就是复习一下上面的象形柱图，也是利用。
echarts画出特殊形状的柱状图
谎言三叶草
04-25 7472
通常echarts画出的柱状图都是矩形，怎样用echarts画出特殊形状的柱状图呢？例如：代码配置参数如下：option = {    xAxis: {        type: 'category',        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']    },    yAxis: {        type: 'val...
index.js_echarts中几个典型的图表的js文件_
10-02
总的来说，这个压缩包提供了一个学习ECharts图表应用的好机会，尤其是对于那些对数据可视化有兴趣或者需要在项目中使用ECharts的人来说，通过对“index.js”的研究，可以快速上手并灵活运用ECharts的各种图表，提升...
echarts增量设备贯通率图表代码
06-24
标题中的“echarts增量设备贯通率图表代码”指的是使用ECharts数据可视化库创建的一个特定类型的图表，用于展示设备贯通率的变化情况。ECharts是百度推出的一款开源JavaScript图表库，能够帮助开发者在网页上生成...
利用 Flask 动态展示 Pyecharts 图表数据的几种方法
09-18
与Flask搭配的Pyecharts是一个用于生成各种图表的库，其依赖于百度的Echarts图表库，它提供了一个非常简洁和友好的API，使得开发者能够以一种直观的方式创建丰富的图表。 在实现动态展示Pyecharts图表时，主要涉及...
【JavaScript源代码】vue使用echarts图表自适应的几种解决方案.docx
12-29
以下是针对Vue中ECharts图表自适应的几种常见解决方案： 1. **使用`window.onresize`事件** 这是最基础的实现方式，通过监听窗口的resize事件，调用ECharts的`resize()`方法来更新图表的大小。代码示例如下： ```...
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变数值文本，涉及点击事件，功能齐全的易于使用；
echarts 柱状图【立体】
热门推荐
小菜张的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
echarts实现立体柱状图
qq_43651168的博客
08-04 1398
echarts实现立体柱状图。
echart(2)——柱状图
qq_46285250的博客
07-07 689
案例 pictorialBar 象形柱状图 修改并注释的代码 源码地址：https://www.makeapie.com/editor.html?c=xMQLI9VAFHa option = { backgroundColor: '#031245', textStyle: { color: '#c0c3cd', fontSize: 14, }, toolbox: { //工具箱 show: true,
echarts横向立体3D柱状图
最新发布
Dalin0929的博客
07-05 398
echarts横向立体3D柱状图
echarts数据可视化图表（二）：双柱状图
前端互助会
10-31 6736
echarts数据可视化图表（二）：双柱状图 效果图： html <script src="js/4.2.1/echarts.min.js"></script> <div class="box-echarts" id="Echarts09"></div> js var loadEcharts09 = function () { var myChartss = echarts.init(document.getEle.
Vue 中 Echarts实现三角锥形柱形图
森海か的博客
03-21 2652
vue 中 实现 三角锥形柱形图
使用echarts实现立体-柱状图
日积月累
07-21 790
用echarts实现立体-柱状图ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。通过增量渲染技术（4.0+），配合各种细致的优化，ECharts能够展现千万级的数据量，并且在这个数据量级依然能够进行流畅的缩放平移。............
asp.net+echarts绘制图表
06-20
### 回答1： ASP.NET是一个基于Web的应用程序开发平台，支持多种编程语言和开发工具。随着Web应用程序的发展，数据可视化变得越来越重要，ECharts是一个非常流行的数据可视化库。 使用ECharts绘制图表需要几个步骤。首先，在ASP.NET项目中添加ECharts库，并在需要绘制图表的页面中引入相关的JavaScript文件和CSS。 然后，我们需要编写JavaScript代码来配置图表。这包括定义图表的类型、数据来源、样式和其他样式选项。可以在ECharts官网上找到各种类型的图表示例和文档，作为参考和指导。 最后，将图表渲染到HTML页面中。可以使用ECharts提供的API来将图表插入到指定的HTML元素中。 除了基本的图表绘制功能，ECharts还提供了一些高级的特性，如数据驱动的图形变化、交互式数据探索、闪烁式动画效果等。这些特性可以进一步增强数据可视化的效果，为用户提供更好的数据分析和理解能力。 在ASP.NET应用程序中使用ECharts绘制图表可以使数据更好地呈现出来，为用户提供更好的数据可视化效果。这对于数据分析、报表和决策支持等方面都非常有帮助。 ### 回答2： ASP.NET是一个强大的Web应用程序框架，可以让开发者使用各种技术（如HTML、CSS、JavaScript等）来构建高效的Web应用程序。而ECharts则是一款极其强大的JavaScript图表库，可以在Web应用程序中呈现各种类型的图表，如折线图、柱状图、饼图、雷达图等等。 在ASP.NET中使用ECharts绘制图表非常简单，只需要引入ECharts的JavaScript文件，并编写一些JavaScript代码即可实现想要的图表效果。ASP.NET中的ECharts使用采用前端渲染的方式，将图表的数据和样式信息通过JSON格式传递给浏览器，由浏览器进行渲染，从而实现对数据的可视化。开发者可以通过ECharts提供的丰富的API来自定义图表样式，如更改颜色、字体、标签等。 在ASP.NET中使用ECharts的主要优点是能够快速实现数据可视化，使得开发者可以更直观地了解数据的特点，从而更快速地做出决策。同时，ECharts还支持对移动设备的适配，可以在不同设备上实现合适的图表展示效果。 总之，ASP.NET结合ECharts可以让开发者更便捷地实现数据可视化，展示出更直观的数据结果，帮助用户更好地了解和处理数据。 ### 回答3： asp.net echarts是一种非常强大的数据可视化组件，可以在asp.net网页中轻松地绘制各种图表，包括折线图、柱状图、饼状图、散点图等。由于asp.net echarts使用简单方便，所以很受开发者的喜爱。 想要在asp.net网页中使用echarts绘制图表，需要先准备好echarts库和所需的数据。可以通过引入echarts.js文件和样式表，然后在网页中设置一个容器，用于显示echarts图表。接下来，可以通过JavaScript或jQuery编写代码，在容器中绘制不同类型的图表，并对其进行样式和交互的设置。 使用asp.net echarts绘制图表时，需要注意一些细节问题。例如在加载echarts库时需要注意版本兼容性，需要对数据进行合理的处理和格式化，还需要设置一些参数和方法，以达到更好的可视化效果。 总之，使用asp.net echarts可以快速轻松地实现数据可视化的需求，使数据更加直观、易于理解，有助于提高网页的用户体验，也有助于更好地展示数据分析的结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值