Echarts各种图表案例(代码+效果)

阅读目录

      • 一、编写模板
      • 一、折线图
      • 三、柱形图
      • 四、叠加的柱形图
      • 五、散点图
      • 六、饼图
      • 七、雷达图
      • 八、中国地图

学习网站: Echarts官网

一、编写模板

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

<html>
<head lang="en">
    <meta charset="utf-8">
    <title>EChartstitle>
    <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>

一、折线图

Echarts各种图表案例(代码+效果)_第1张图片

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: '周最低'}
                    ]
                }
            }
        ]
    };

三、柱形图

Echarts各种图表案例(代码+效果)_第2张图片

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: '周最低'}]}
            }
        ]
    };

四、叠加的柱形图

Echarts各种图表案例(代码+效果)_第3张图片
只需要在前面柱形图代码的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: '周最低'}]}
            }
        ]

五、散点图

Echarts各种图表案例(代码+效果)_第4张图片

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

Echarts各种图表案例(代码+效果)_第5张图片Echarts各种图表案例(代码+效果)_第6张图片

    var option = {
        tooltip: {
            trigger: 'item',// trigger 设置触发类型,默认数据触发,可选值:'item' ¦ 'axis'
            formatter: "{a} 
{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);

七、雷达图

Echarts各种图表案例(代码+效果)_第7张图片

    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);

八、中国地图

Echarts各种图表案例(代码+效果)_第8张图片

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)}
                  ]
              }
          ]
    };

你可能感兴趣的:(数据可视化)