Echarts各种图表案例（代码+效果）

最新推荐文章于 2024-06-20 09:30:03 发布

忌颓废

最新推荐文章于 2024-06-20 09:30:03 发布

阅读量8.9k

点赞数 2

分类专栏：数据可视化文章标签：数据可视化可视化 javascript html

本文链接：https://blog.csdn.net/weixin_44947339/article/details/103966120

版权

数据可视化专栏收录该内容

12 篇文章 3 订阅

订阅专栏

阅读目录

学习网站： Echarts官网

一、编写模板

从官网下载echarts.min.js文件
模板如下，以后编写echarts图表只需改变option里的内容就可以了

<html>
<head lang="en">
    <meta charset="utf-8">
    <title>ECharts</title>
    <style type="text/css">
        #main{height:400px;width: 1000px}
    </style>
    <script src="echarts.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化 echarts 实例并绘制图表。
    var myChart = echarts.init(document.getElementById("main"));
    // 指定图表的配置项和数据
    var option={};
    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>
</body>
</html>

一、折线图

在这里插入图片描述

var option = {
        title : {
            text: '未来一周气温变化',
            subtext: '广东省气象局'
             },
        tooltip : {
            trigger: 'axis'// trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
        },
        legend: {
            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'horizontal',
            data:['最高气温','最低气温']
        },
        xAxis : [
            {
                type : 'category',//类目轴
                boundaryGap : false, // boundaryGap值为false的时候，折线第一个点在y轴上
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',//数值轴
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'最高气温',
                type:'line',//图形类型
                symbolSize:8,// 设置折线上圆点大小
                symbol: 'none',// 设置小圆点消失,注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                smooth: 0.5,// 设置折线弧度，取值：0-1之间
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                 markLine:{
                        data:[
                            {type:'average',name:'平均值'}
                        ]
                    }
            },
            {
                name:'最低气温',
                type:'line',
                symbol:'circle',// 设置拐点为实心圆
                symbolSize:8,// 设置折线上圆点大小
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {type : 'min', name: '周最低'}
                    ]
                }
            }
        ]
    };

三、柱形图

在这里插入图片描述

var option = {
        title : {
            text: '未来一周气温变化',
            subtext: '广东省气象局' },
        tooltip : {
            trigger: 'axis'},
        legend: {
            itemGap:40,
            data:['最高气温','最低气温']},
        calculable : true,
        xAxis : [{
                type : 'category',
                data : ['周一','周二','周三','周四','周五','周六','周日']}],
        yAxis : [{
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'}}],
        series : [
        	{
                name:'最高气温',
                type:'bar',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}]}},
            {
                name:'最低气温',
                type:'bar',
                data:[1, 4, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {type : 'min', name: '周最低'}]}
            }
        ]
    };

四、叠加的柱形图

在这里插入图片描述
只需要在前面柱形图代码的series添加 stack:‘1’（具体位置看如下代码）

  series : [{
                stack:'1',//叠起来
                name:'最高气温',
                type:'bar',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}]}},
            {
                stack:'1',//叠起来
                name:'最低气温',
                type:'bar',
                data:[1, 4, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {type : 'min', name: '周最低'}]}
            }
        ]

五、散点图

在这里插入图片描述

var option ={
            title:{
                text:'男女身高体重比例',
                subtext:'纯属虚构'
            },
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    show:true,
                    type:'cross',
                    lineStyle:{
                        type:'dashed',
                        width:1
                    }
                }
            },
            legend:{
                data:['男生','女生']
            },
            xAxis:{
                type:'value',
                scale:true,//是否脱离0刻度，设置成 true 后坐标刻度不会强制包含零刻
                axisLabel:{
                    formatter:'{value}cm'
                }
            },
            yAxis:{
                type:'value',
                scale:true,
                axisLabel:{
                    formatter:'{value}kg'
                }
            },
            series:[
                {
                    name:'女生',
                    type:'scatter',
                    data: [
                        [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                        [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                        [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],

                    ],
                    markPoint:{
                        data:[
                            {type:'max',name:'最大值'},
                            {type:'min',name:'最小值'}
                        ]},
                    markLine:{
                        data:[
                            {type:'average',name:'平均值'}
                        ]
                    }
                },
                {
                    name:'男生',
                    type:'scatter',
                    data: [
                        [174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
                        [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
                        [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0]
                    ],
                    markPoint:{
                        data:[
                            {type:'max',name:'最大值'},
                            {type:'min',name:'最小值'}
                        ]},
                    markLine:{
                        data:[
                            {type:'average',name:'平均值'}
                        ]
                    }
                }
            ]
        };

六、饼图

roseType:‘area’,//是否显示成南丁格尔图默认false

在这里插入图片描述

    var option = {
        tooltip: {
            trigger: 'item',// trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
            formatter: "{a} <br/>{b}: {c} ({d}%)"// formatter设置提示框显示内容,
            // {a}指series.name,b}指series.data的name,
            // {c}指series.data的value  {d}%指这一部分占总数的百分比.
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
//                roseType:'area',//是否显示成南丁格尔图默认false
                radius: ['30%', '70%'],// 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
                center: ['50%', '50%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置

                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    myChart.setOption(option);

七、雷达图

在这里插入图片描述

    var option={
        title:{
            text:'基础雷达图'
        },
        tooltip:{
            trigger:'axis'
        },
        legend: {
            data: ['预算分配', '实际开销']
        },
        polar:[{
            indicator:[//雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
                    { text: '销售', max: 6500},// 指示器名称,指示器的最大值，可选，建议设置
                    { text: '管理', max: 16000},
                    { text: '信息技术', max: 30000},
                    { text: '客服', max: 38000},
                    { text: '研发', max: 52000},
                    { text: '市场', max: 25000}
                ]}],
        calculable:true,
        series:[
            {
                name:'预算 vs 开销',
                symbol: 'none',//去掉拐点的圈
                center: ['50%', '50%'],// 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
                radius:160,// 圆的半径，数组的第一项是内半径，第二项是外半径。
                itemStyle:{normal:{areaStyle:{type:'default'}}},
                type:'radar',
                data:[
                    {value:[4300,1000,28000,35000,5000,19000], name:'预算分配'},
                    {value:[5000,14000,28000,31000,42000,21000], name:'实际开销'}
                    ]
        }]
    };
    myChart.setOption(option);

八、中国地图

在这里插入图片描述

var option={
       title:{
             text:'各省人口统计',
             x: 'center'
         },
         tooltip:{trigger:'item'},
        dataRange:{
             min:0,
            max:10000000,
            x:'left',
            y:'bottom',
            color:['lightskyblue','pink'],
            text:['高','低'],
            calculable:true
        },
         series:[{
              name:'人口',
              type:'map',//地图类型
              mapType:'china',//获取中国的地图
              itemStyle: {
                  normal: {label: {show: true}},//显示标签
                  emphasis: {//选中或者悬浮状态
                      label: {show: true}
                  }
              },
              data: [
                  {name: '北京', value: Math.round(Math.random() * 10000000)},
                  {name: '天津', value: Math.round(Math.random() * 10000000)},
                  {name: '河北', value: Math.round(Math.random() * 10000000)},
                  {name: '山西', value: Math.round(Math.random() * 10000000)},
                  {name: '内蒙古', value: Math.round(Math.random() * 10000000)},
                  {name: '辽宁', value: Math.round(Math.random() * 10000000)},
                  {name: '吉林', value: Math.round(Math.random() * 10000000)},
                  {name: '黑龙江', value: Math.round(Math.random() * 10000000)},
                  {name: '上海', value: Math.round(Math.random() * 10000000)},
                  {name: '江苏', value: Math.round(Math.random() * 10000000)},
                  {name: '浙江', value: Math.round(Math.random() * 10000000)},
                  {name: '安徽', value: Math.round(Math.random() * 10000000)},
                  {name: '福建', value: Math.round(Math.random() * 10000000)},
                  {name: '江西', value: Math.round(Math.random() * 10000000)},
                  {name: '山东', value: Math.round(Math.random() * 10000000)},
                  {name: '河南', value: Math.round(Math.random() * 10000000)},
                  {name: '湖北', value: Math.round(Math.random() * 10000000)},
                  {name: '湖南', value: Math.round(Math.random() * 10000000)},
                  {name: '广东', value: Math.round(Math.random() * 10000000)},
                  {name: '广西', value: Math.round(Math.random() * 10000000)},
                  {name: '海南', value: Math.round(Math.random() * 10000000)},
                  {name: '重庆', value: Math.round(Math.random() * 10000000)},
                  {name: '四川', value: Math.round(Math.random() * 10000000)},
                  {name: '贵州', value: Math.round(Math.random() * 10000000)},
                  {name: '云南', value: Math.round(Math.random() * 10000000)},
                  {name: '西藏', value: Math.round(Math.random() * 10000000)},
                  {name: '陕西', value: Math.round(Math.random() * 10000000)},
                  {name: '甘肃', value: Math.round(Math.random() * 10000000)},
                  {name: '青海', value: Math.round(Math.random() * 10000000)},
                  {name: '宁夏', value: Math.round(Math.random() * 10000000)},
                  {name: '新疆', value: Math.round(Math.random() * 10000000)},
                  {name: '台湾', value: Math.round(Math.random() * 10000000)},
                  {name: '香港', value: Math.round(Math.random() * 10000000)},
                  {name: '澳门', value: Math.round(Math.random() * 10000000)}
                  ]
              }
          ]
    };

忌颓废

关注

2
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
Echarts各种图表案例（代码+效果）

Echarts官网：https://echarts.apache.org/zh/index.html一、效果图第一个图：折线图第二个图：柱形图第三个图：叠加的柱形图第四个图：散点图二、编写模板从官网下载echarts.min.js文件模板如下，以后编写echarts图表只需改变option里的内容就可以了<html><head lang="en">...
复制链接

扫一扫

专栏目录