ECharts图表代码案例

已于 2024-04-15 10:23:47 修改
阅读量454 收藏 12
点赞数 12
文章标签： echarts 前端 javascript
于 2024-03-11 10:09:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75544053/article/details/136616111
版权

目录

条形图

柱状图

折线图：type：line 

堆积图

瀑布图 

饼图 

圆环图 

嵌套饼图

南丁格尔玫瑰图

条形图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title:{
                text:'图表',
                subtext:'表',
            },
            tooltip:{
                tigger:'axis',
            },
            legend:{
                data:['成绩'],
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{show:true,type:['line','bar']},
                    restore:{show:true},
                    saveAsImage:{show:true},
                },
            },
            calcuable:true,
            xAxis:[
                {
                    type:'value',
                    boundaryGap:[0,0.01],
                },
            ],
            yAxis:[
                {
                    type:'category',
                    data:['小红','小张','小祝'],
                },
            ],
            series:[
                {
                    name:'小红',
                    type:'bar',
                    data:['490','690','500'],
                },
                {
                    name:'小张',
                    type:'bar',
                    data:['500','400','450'],
                },
                {
                    name:'小祝',
                    type:'bar',
                    data:['600','456','676'],
                },
            ],
        };
        myChart.setOption(option);
        </script>
</body>
</html>

柱状图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '这里是绘制图表的标题',
                subtext: '这里是副标题',
            },
            tooltip: {},
            legend: {
                data: ['销量'],
            },
			xAxis:{
				data:["红枣","草莓","柠檬","香蕉","车厘子","雪梨"]
			},
            yAxis:{},
			series:[{
				name:"销量",
                type:'bar',
                data:[5,12,18,10,15,19] 
			}]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

折线图：type：line 

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '这里是绘制图表的标题',
                subtext: '这里是副标题',
            },
            tooltip: {},
            legend: {
                data: ['销量'],
            },
			xAxis:{
				data:["红枣","草莓","柠檬","香蕉","车厘子","雪梨"]
			},
            yAxis:{},
			series:[{
				name:"销量",
                type:'line',
                data:[5,12,18,10,15,19] 
			}]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

图标类型 

柱状图： type:'bar',       条形图：type:'line',

 触发

tooltip: {
                trigger: 'axis',
            },
//设置提示框（tooltip）的触发方式为“axis”，即当鼠标悬停在坐标轴上时显示提示框。
 
 
 
toolbox: {  
    show: true, // 是否显示工具箱组件。  
    feature: {  
        mark: { show: true }, // 是否显示标记辅助线或标记点。  
        dataView: { show: true, readOnly: false }, // 是否显示数据视图，并且是否允许编辑数据。  
        magicType: { show: true, type: ['line', 'bar'] }, // 是否显示图表切换类型按钮，并指定可以切换的图表类型。  
        restore: { show: true }, // 是否显示重置图表为初始状态的按钮。  
        saveAsImage: { show: true }, // 是否显示保存为图片按钮。  
    },  
}

标题

textStyle:{
                    color:'green',
                },
                borderWidth:'5',
                borderColor:"blue",
                left:'center',

堆积图

堆积 

stack:'all',
areaStyle:{}

series:[{
				name:"销量",
                type:'line',
                data:[5,12,18,10,15,19],
                stack:'all',
                areaStyle:{}
			}]
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '这里是绘制图表的标题',
                textStyle:{
                    color:'green',
                },
                borderWidth:'5',
                borderColor:"blue",
                left:'center',
            },
            tooltip: {},
            legend: {
                data: ['销量'],
                right:'right'
            },
			xAxis:{
				data:["红枣","草莓","柠檬","香蕉","车厘子","雪梨"]
			},
            yAxis:{},
			series:[{
				name:"销量",
                type:'line',
                data:[5,12,18,10,15,19],
                stack:'all',
                areaStyle:{}
			}]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

瀑布图 

itemStyle:{
                    normal:{
                        //barBorderColor:'rgba(0,0,0,0)'.
                        barColor:'transparent',
                        //Color:'rgba(0,0,0,0)'.
                        color:'transparent',
                    },
                    emphasis:{
                        barColor:'transparent',
                        
                        color:'transparent'
                    }
                    },
                    data:[0,1700,1400,1200,300,0]
                },
                
                {
                    name:'生活费',
                    type:'bar',
                    stack:'总量',
                    itemStyle:{normal:{labal:{show:true,position:'insode'}}},
                    data:[2900,1200,300,200,900,300]
                }
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '这里是绘制图表的标题',
                subtext: '这里是副标题',
            },
            tooltip: {},
            legend: {
                data: ['销量'],
            },
			xAxis:{
				data:["红枣","草莓","柠檬","香蕉","车厘子","雪梨"]
			},
            yAxis:{},
			series:[{
				name:"销量",
                type:'bar',
                stack:'总量',
                itemStyle:{
                    normal:{
                        //barBorderColor:'rgba(0,0,0,0)'.
                        barColor:'transparent',
                        //Color:'rgba(0,0,0,0)'.
                        color:'transparent',
                    },
                    emphasis:{
                        barColor:'transparent',
                        
                        color:'transparent'
                    }
                    },
                    data:[0,1700,1400,1200,300,0]
                },
                
                {
                    name:'生活费',
                    type:'bar',
                    stack:'总量',
                    itemStyle:{normal:{labal:{show:true,position:'insode'}}},
                    data:[2900,1200,300,200,900,300]
                }
			
            ]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

饼图 

type:'pie'

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
option = {
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '45%',
        data: [
          { value: 1048, name: '生活方式' },
          { value: 735, name: '遗传因素' },
          { value: 580, name: '社会因素' },
          { value: 484, name: '医疗条件' },
          { value: 300, name: '气候环境' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
    </script>
</body>
 
</html>

圆环图 

讲语句radius:'45%'修改为radius:['45%,'75']

radius: ['45','75'],
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
option = {
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['45','75'],
        data: [
          { value: 1048, name: '生活方式' },
          { value: 735, name: '遗传因素' },
          { value: 580, name: '社会因素' },
          { value: 484, name: '医疗条件' },
          { value: 300, name: '气候环境' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
    </script>
</body>
 
</html>

 

 嵌套饼图

selectedMode:'single',
        radius: ['10','30'],
        label:{
            position:'inner'
        },
        labelLine:{
            show:false
        },
        data:[
            { value: 1200, name: '1' },
            { value: 900, name: '2' },
            { value: 600, name: '3',selected:true },
        ]
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
option = {
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        selectedMode:'single',
        radius: ['10','30'],
        label:{
            position:'inner'
        },
        labelLine:{
            show:false
        },
        data:[
            { value: 1200, name: '1' },
            { value: 900, name: '2' },
            { value: 600, name: '3',selected:true },
        ]
    },
    {
        name: 'Access From',
        type: 'pie',
        selectedMode:'single',
        radius: ['40','55'],
        data: [
          { value: 800, name: '生活方式' },
          { value: 400, name: '遗传因素' },
          { value: 500, name: '社会因素' },
          { value: 200, name: '医疗条件' },
          { value: 300, name: '气候环境' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
    </script>
</body>
 
</html>

 

 南丁格尔玫瑰图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
option = {
    title: {
      text: 'Nightingale Chart',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      left: 'center',
      top: 'bottom',
      data: [
        'rose1',
        'rose2',
        'rose3',
        'rose4',
        'rose5',
        'rose6',
        'rose7',
        'rose8'
      ]
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Radius Mode',
        type: 'pie',
        radius: [20, 140],
        center: ['25%', '50%'],
        roseType: 'radius',
        itemStyle: {
          borderRadius: 5
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true
          }
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 33, name: 'rose 2' },
          { value: 28, name: 'rose 3' },
          { value: 22, name: 'rose 4' },
          { value: 20, name: 'rose 5' },
          { value: 15, name: 'rose 6' },
          { value: 12, name: 'rose 7' },
          { value: 10, name: 'rose 8' }
        ]
      },
      {
        name: 'Area Mode',
        type: 'pie',
        radius: [20, 140],
        center: ['75%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
        },
        data: [
          { value: 30, name: 'rose 1' },
          { value: 28, name: 'rose 2' },
          { value: 26, name: 'rose 3' },
          { value: 24, name: 'rose 4' },
          { value: 22, name: 'rose 5' },
          { value: 20, name: 'rose 6' },
          { value: 18, name: 'rose 7' },
          { value: 16, name: 'rose 8' }
        ]
      }
    ]
  };
  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
    </script>
</body>
 
</html>

 随机变换

toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },

 详情提示框光标滑动图表

tooltip: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //设置坐标轴默认为直线，可选为:'line'|'shadow'
                }
            },
tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },

 

23_123456
关注
  • 12
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Echarts实例
11-29
简单的Echars使用小demo,解压后，直接点html便可以看到效果
echarts实例
08-29
输入数据会形成表格装数据,同时数据会形成对应的统计图,还可以选择统计图的类型.
Echarts数据可视化教程(超详细，持续更新中(1)
最新发布
2401_84418883的博客
04-28 915
1.什么是数据可视化？把数据以图表(更直观)的形式展现 -->图表2.数据可视化的好处清晰有效地传达与沟通信息更好的观察隐藏在数据中的信息3.数据可视化的的实现方式报表类Excel水晶报表商业智能BIIPower BI编码类(最佳灵活、门槛高)Echarts.jsD3.jsEcharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。
echarts完整实例
10-20
这是我实际项目中的一个echarts完整实例，将echarts数值通过json方式从后台数据库中读取。
【Echarts】echarts饼图、圆环图配置代码详解
热门推荐
做笔记/记录遇到的前端bug
07-01 1万+
图文详解，带你快速了解Echarts饼图、圆环图、多层圆环图。并附上多种常见echarts饼图、圆环图示例及全量代码
echarts入门图表可视化（基本介绍+示例代码）
weixin_45594172的博客
11-21 1408
echarts入门图表可视化（基本介绍+示例代码）
开源图表echarts-经典图表代码整理
11-26
本资料主要整理了ECharts的经典图表代码，帮助用户快速理解和使用这个强大的工具。 首先，ECharts支持多种图表类型，包括折线图、柱状图、饼图、散点图、K线图、地图、仪表盘等。这些图表在数据可视化中各有其应用...
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
echarts mapbox地图案例
12-12
在案例中，我们可能看到了如何使用ECharts的`map`类型图表来显示MapBox风格的地图。 2. **MapBox样式**： MapBox允许用户通过其强大的Mapbox Studio创建自定义地图样式，这些样式可以导入到ECharts中，使得地图...
Echarts安徽省地图案例
10-25
在提供的"anhui"文件中，可能就包含这样的JSON数据，这将用于在ECharts图表上绘制出安徽省的地图轮廓。 接下来，我们关注"描述"中提到的地市名称显示位置的问题。在默认情况下，ECharts可能会根据JSON数据中的坐标...
Echarts封装案例
11-02
在"**Echarts封装案例**"压缩包中，可能包含了实现上述封装过程的相关代码示例，包括配置文件、封装后的模块文件，以及可能的示例HTML页面。通过研究这些文件，你可以更深入地理解ECharts的封装技术，从而在实际项目...
ECharts数据可视化完整代码
nanxun201314的博客
12-03 2373
ECharts数据可视化完整代码
Pyecharts绘图教程（2）—— 绘制多种折线图（Line）参数说明+代码实战
Python当打之年
10-23 3336
绘制多种折线图（Line）代码实战
Echarts实战之折线图和条形图（代码）
2301_77751917的博客
03-12 690
步骤5：将配置项设置给echarts实例对象。三、条形图 （type:'bar'）步骤1：引入echarts.js文件。步骤3：初始化echarts实例对象。一、Echarts初始化代码格式。(1)X轴为数值轴，Y轴为类目轴。(2)X轴为类目轴，Y轴为数值轴。步骤2：准备一个呈现图表的盒子。坐标轴类型的type标签。
ECharts的代码详解
qq_43530326的博客
02-23 496
设置折线图表的配置项和数据的每行代码的注释
Echarts详解
qq_43649937的博客
12-31 1379
Echarts vue
数据可视化 -- ECharts 入门
m0_63260018的博客
09-19 2673
ECharts（全称“EchoCharts”）是一个开源的、纯JavaScript实现的图表库，由百度前端团队（EFE）以及社区贡献者共同维护和开发。它提供了一整套丰富的图表类型，包括折线图、柱状图、饼图、雷达图、散点图、地图、热力图、箱线图等，用于各种数据可视化需求。
ECharts实现数据可视化入门教程（超详细），你真的了解前端系统启动流程吗
m0_57472099的博客
04-01 1384
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。[外链图片转存中…(img-PE4j8yoP-1711903022679)]
（前端）使用Apache ECharts绘制可视化图表
weixin_64388392的博客
11-22 981
使用Apache ECharts绘制前端可视化图表（动态折线图示例）
echarts连接数据库生成图表jsp案例
09-01
ECharts连接数据库生成图表的JSP案例可以通过以下步骤实现： 1. 在JSP页面中引入ECharts的相关资源文件，包括echarts.min.js和一个自定义的JS文件用于生成图表。 2. 在JSP页面中添加一个用于展示图表的容器，可以是一个div元素，给其指定一个唯一的id。 3. 在JSP页面中编写一个用于连接数据库的Java代码片段，使用JDBC等相关技术，读取数据库中的数据。 4. 在JSP页面中编写一个用于生成图表的JavaScript代码片段。可以根据从数据库中读取到的数据，定义图表的配置项和数据项。 5. 在JavaScript代码中，使用ECharts提供的API将配置项和数据项应用到图表容器上，并调用相应的渲染方法进行图表的生成。 6. 在JSP页面中将数据库读取到的数据传递给JavaScript代码，可以通过将数据存储到一个JavaScript变量中，或通过Ajax等方式进行数据的传递。 7. 在JSP页面中，通过调用生成图表的JavaScript代码，将图表渲染到指定的容器中。 通过以上步骤，就可以在JSP页面中实现ECharts连接数据库生成图表的功能。在生成图表之前，需要先连接数据库并从数据库中读取数据，然后将数据传递给JavaScript代码，最后通过调用相应的渲染方法生成图表。可以根据具体的业务需求和数据结构，进行相应的配置和定制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值