Echarts快速入门

2020-04-09 16:01:18来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

Echarts快速入门

本文作者钢头娃,转载请备注

Echarts 快速入门

Echarts 介绍

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
2018年3月全球著名开源社区Apache宣布百度ECharts进入Apache孵化器。

特性

  1. 丰富的可视化类型
  2. 多种数据格式无需转换直接使用
  3. 千万数据的前端展现
  4. 移动端优化
  5. 多渲染方案,跨平台使用
  6. 动态数据
  7. 绚丽的特效

安装

获取Echarts

  1. 最直接的方法是在ECharts的官方网址中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者也可以直接下载完整版本;开发环境建议下载源代码版本,这个里面包含了常见的错误提示和警告
  2. 通过 npm 获取 echarts,npm install echarts --save
  3. cdn 引入,你可以在 cdnjs,npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

快速上手

通过标签方式直接引用构建好的E charts文件

绘制一个简单的图表

在绘图前我们需要为E charts准备一个具备宽高的DOM容器,然后通过echarts.init方法初始化一个E charts实例并通过setOption方法生成一个简单的柱状图,下面是完整代码和效果图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.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: 'ECharts 入门示例'
            },
            grid:{
              top:'10%',
              right:'30%',
              bottom:'60%',
              left:'5%'
            },
            tooltip: {},
            legend: {
                data:['确诊人数']
            },
            xAxis: {
                data: ["意大利","伊朗","西班牙","德国","瑞士","法国","美国","英国","韩国"]
            },
            yAxis: {},
            series: [{
                name: '确诊人数',
                type: 'bar',
                data: [74386, 27017, 49515, 37323, 10897, 25233,69223,9529,9241]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

image

在webpack上使用E charts

通过 npm install echarts --save 命令安装
通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require('echarts') 得到 ECharts。

var echarts = require('echarts');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    grid:{
        top:'10%',
        right:'30%',
        bottom:'60%',
        left:'5%'
    },
    tooltip: {},
    legend: {
        data:['确诊人数']
    },
    xAxis: {
        data: ["意大利","伊朗","西班牙","德国","瑞士","法国","美国","英国","韩国"]
    },
    yAxis: {},
    series: [{
        name: '确诊人数',
        type: 'bar',
        data: [74386, 27017, 49515, 37323, 10897, 25233,69223,9529,9241]
    }]
});
//最终效果和上图一样

注意:渲染顺序

Option常用配置项

backgroundColor 背景色

默认无背景transparent;颜色可以使用 RGB 表示,比如 'rgb(128, 128, 128)',如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 'rgba(128, 128, 128, 0.5)',也可以使用十六进制格式,比如 '#ccc'。除了纯色之外颜色也支持渐变色和纹理填充

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 true,则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}
// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

title标题组件

  • show: 是否显示标题组件,默认值 true-boolean类型
  • text: 主标题文本,支持使用\n换行-string类型
  • link: 主标题文本超链接-string类型
  • textStyle: 主标题的样式-Object类型
  • subtext: 副标题文本,支持\n换行-string类型

legend图例标签

  • show:是否显示,默认true
  • left: 图例组件距离容器左侧的距离,值可以是数字,百分比,left,center,right
  • top: 组件举例容器顶部的距离,值可以是数字,百分比,top,middle,bottom
  • right: 组件举例容器右侧的距离,其他和left一样
  • bottom: 组件举例容器顶部的距离,其他和top一样
  • width: 组件的宽度,默认'auto'
  • height:组件的高度,默认'auto'
  • orient:图例列表的布局朝向,horizontal 横向排列,vertical纵向排列
  • selected:图例选中状态表。
  • 其他

dataset 数据集

  • source

grid网格标签

直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)。

  • show: 是否显示直角坐标系网格,默认值false-boolean
  • left: 组件举例容器左侧的距离,值可以是数字,百分比,left,center,right
  • top: 组件举例容器顶部的距离,值可以是数字,百分比,top,middle,bottom
  • right: 组件举例容器右侧的距离,其他和left一样
  • bottom: 组件举例容器顶部的距离,其他和top一样
  • width: 组件的宽度,默认'auto'
  • height:组件的高度,默认'auto'
  • 其他

一个DOM中放入多个坐标系

  • x: 组件在DOM中的横坐标位置,如果使用了left,x不生效;x和right一起使用,right不生效
  • y: 组件在DOM中的纵坐标位置,如果使用了top,x不生效;y和bottom一起使用,bottom不生效
  • 案例:image

xAxis

  • show:是否显示 x 轴,默认true
  • position: x轴的位置,默认borrom,也可以是top
  • name:坐标轴名称
  • nameLocation:坐标轴名称显示位置,默认值end;值的范围是start/middle/center/end
  • 其他

yAxis

  • show:是否显示 y 轴,默认true
  • position: y轴的位置,默认left,也可以是right
  • name:坐标轴名称
  • nameLocation:坐标轴名称显示位置,默认值end;值的范围是start/middle/center/end

tooltip提示框组件

  • show:是否显示提示框组件,默认值true
  • trigger:触发类型,默认值item-数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用;也可以设置axis-坐标轴触发,主要在柱状图和折线图等会使用类目轴的图表中使用;none-什么都不触发
  • showContent:是否显示内容,默认true

toolbox工具栏组件

  • show:是否显示工具栏组件,默认显示
  • orient:工具栏布局朝向,默认horizontal横向,vertical纵向
  • feature: 工具栏配置项
    • saveAsImage: 保存为图片
    • restore: 配置项还原
    • dataView: 数据视图工具
    • dataZoom: 数据缩放
    • magicType: 动态类型切换,type:['line', 'bar', 'stack', 'tiled']
  • showTitle:鼠标hover的时候是否显示icon的标题,默认true

radar雷达坐标系组件

  • center = ['50%','50%']圆心坐标,第一项是横坐标,第二项是纵坐标
  • radius: 半径,【number/string/Array】
  • name:雷达图的名称
  • shape:雷达图绘制类型,默认是多边形polygon【polygon/circle】
  • axisLine:坐标轴轴线相关设置
  • axisTick:坐标轴刻度相关设置
  • axisLabel:坐标轴刻度标签的相关设置

dataZoom 区域缩放

  • dataZoom-inside:内置型数据区域缩放组件
    • type:inside 默认值
    • start:数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
    • end :数据窗口范围的结束百分比。范围是:0 ~ 100。
    • orient:布局方向【horizontal/vertical】
  • dataZoom-slider:滑动条型数据区域缩放组件
    • type: slider 默认值
    • backgroundColor 组件背景色
    • fillerColor 选中范围的填充颜色
    • borderColor 边框的颜色
    • start:数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
    • end :数据窗口范围的结束百分比。范围是:0 ~ 100。
    • orient:布局方向【horizontal/vertical】

geo 地理坐标系组件

  • show: 是否显示地理坐标系组件
  • map:地图类型,例如:china,world
  • zoom: 当前视角的缩放比例
  • nameMap:自定义地区的名称
  • label: 图形上的文本标签
  • roam:是否开启缩放和平移漫游【scale/move/true/false】
  • center:当前视角的中心点,用经纬度表示
  • aspectScale: 长宽比例

visualMap数据展示类型

  • visualMap-piecewise:分段型
    • type: piecewise
    • splitNumber: 对于连续型数据,自动平均分成几段,默认5段
    • pieces: 分段式视觉映射组件
      • min :最小值
      • max :最大值
      • lt :小于
      • gt :大于
      • gte :大于等于
      • lte :小于等于
      • 注意:如果两个piece的区间重叠,则会自动进行去重
    • 其他
  • visualMap-continuous:连续型
    • type:continuous
    • min:最小值
    • max:最大值
    • range:指定手柄对应数值的位置,range 应在 min max 范围内,如果不设置,会自适应,与最大值最小值一样,例如max = 100,min=1,range = [1,100]
    • itemWidth : 图型的宽度
    • itemHeight :图形的高度
    • text:两端的文本,格式['high','low'],前面的值高后面的值低
    • 其他

series系列列表

  • series-line:折线/面积图
    • type: 默认值line
    • name: 系列名称
    • coordinateSystem:该系列使用的坐标系,默认使用cartesian2d二维的直角坐标系,polar是极坐标系
    • clip:是否裁剪超出坐标部分的图形,除自定义系列默认都为true
    • step:是否采用阶梯线图,默认false,也支持设置成start/middle/end
    • lanel:图形上的文本标签
      • show:是否显示,默认false
      • formatter:标签内容格式
        1. {a}:系列名
        2. {b}:数据名
        3. {c}:数据值
    • data:数据,数据个数与xAxis中的data个数数量一样
  • series-bar:柱状/条形图
    • type:默认值bar
    • name:系列名称
    • coordinateSystem:默认值'cartesian2d',没有其他值可以使用
    • label,data和series-line的一样
  • series-pie:饼图
    • type:默认值pie
    • name:系列名称
    • hoverAnimation: 是否开启鼠标在扇区hover的放大动画效果,默认值true
    • roseType: 是否展示成南丁格尔图,通过半径区分数据大小,值的范围:
      • 'radius'扇区圆心角展现数据的百分比,半径展现数据的大小
      • 'area' 所有扇区圆心角相同,仅通过半径展现数据大小。
    • label:饼图图形上的标签
      • show :默认值true
      • position: 标签的位置【outside/inside/inner/center】
      • formatter:标签内容格式
        1. {a}:系列名
        2. {b}:数据名
        3. {c}:数据值
        4. {d}: 百分比
        5. {@xxx}:数据中名为'xxx'的维度的值,如{@product}表示名为'product' 的维度的值。
        6. {@[n]}:数据中维度n的值,如{@[3]}` 表示维度 3 的值,从 0 开始计数。
    • emphasis:高亮的扇区和标签样式。
    • center:饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
    • radius:饼图的半径,【number/string/array】
    • data:系列中的数据内容数组
  • series-scatter:散点图
    • type:scatter 默认值
    • name:系列名称
    • symbol:标记的图形,默认circle。【circle/rect/roundRect/triangle/diamond/pin/arrow/none】
    • symbolSize:标记的大小
    • label:图形上的文本标签
      • show:是否显示标签
      • position:标签的位置【top/left/right/bottom/inside/insideLeft/insideRight/insideTop/insideBottom/insideTopLeft/insideBottomLeft/insideTopRight/insideBottomRight】
  • series-radar:雷达图
    • type:radar 默认值
    • name: 系列名称
    • symbol:标记的图形,默认circle。【circle/rect/roundRect/triangle/diamond/pin/arrow/none】
  • series-map:地图
    • markPoint:图表标注
    • markLine:图表标线

常用api

  • init 创建一个Echarts实例,返回echartsInstance,不能在单个容器上初始化多个Echarts实例
    • 参数:dom实例容器,一般是一个具有高宽的div元素
    • 参数:theme 应用的主题
    • 附加参数:opts
      • devicePixelRatio:设备像素比
      • renderer:渲染器,支持canvas或者svg
      • width:可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。
      • height:可显式指定实例高度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的高度。
  • setOption 设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。
  • getWidth 获取容器的宽度
  • getHeight 获取容器的高度
  • getDom 获取 ECharts 实例容器的 dom 节点。
  • getOption 获取当前实例中维护的 option 对象
  • resize 改变图表尺寸,在容器大小发生改变时需要手动调用。
    • 参数:opts
      • width:可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。
      • height:可显式指定实例高度,单位为像素。如果传入值为 null/undefined/'auto',则表示自动取 dom(实例容器)的高度。
  • on 绑定事件处理函数
    • 参数 eventName:事件名称,全小写,例如'click','mousemove', 'legendselected'
    • 参数 query:可选的过滤条件,能够只在指定的组件或者元素上进行响应。
    • 参数 handler: 事件处理函数,格式为(event:object)
    • 参数 context:可选,回调函数内部的context,即this的指向。
    • 案例:
      • chart.on('click', 'series', function () {...});
      • chart.on('click', 'series.line', function () {...});
      • chart.on('click', 'dataZoom', function () {...});
      • chart.on('click', 'xAxis.category', function () {...});
  • showLoading:显示动画加载效果
  • hideLoading:隐藏动画加载效果
  • getDataURL:导出图表图片,返回一个 base64 的 URL,可以设置为Image的src。
  • clear:清空当前实例

异步数据加载

loading动画

如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});
使用loading案例
function fetchData(cb) {
    // 通过 setTimeout 模拟异步加载
    setTimeout(function () {
        cb({
            categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            data: [5, 20, 36, 10, 10, 20]
        });
    }, 3000);
}
// 初始 option
option = {
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
};
myChart.showLoading();
fetchData(function (data) {
    myChart.hideLoading();
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});
案例效果

image

经典使用案例

折线图

案例一
//配置项
option = {
    xAxis: {
        type: 'category',//类目轴
        boundaryGap: false,//坐标轴两边是否留白,默认是true
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'//可以不写,默认type:value
    },
    series: [{//series-line
        data: [820, 932, 901, 934, 1290, 1330, 1300],
        type: 'line',
        areaStyle: {},//使用区域
        smooth:true,//圆润的折线
        markPoint: {//使用点
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
        markLine:{//使用线
            data:[
            {type:'average',name:'平均值'}
            ]
        }
    }]
};
案例一效果图

image

案例二

 option = {
        legend: {
            orient :'horizontal',//默认是横向排列,也可以是竖向'vertical'
            left:'center',//可以是方位词
            top:'10%'//也可以是数值和百分比
        },//标注系列的名称和颜色
        tooltip: {//提示框
            trigger: 'axis',//坐标触发,还可以是item,只显示一个数据
            showContent: true//提示框显示
        },
        toolbox:{
            top:'10%',
            right:'10%',
            feature:{
                dataView: {readOnly: false},//是否只读
                magicType: {type: ['line', 'bar']},//切换的图形
                restore: {},//数据还原
                saveAsImage: {}//保存图片
            }
        },
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        grid: {
            top: '20%',//距离dom容器顶部
            right:'10%',//...右侧
            bottom:'10%',//底部
            left:'10%'//左侧
        },
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
        ]
    };
案例二效果图

image

柱状图

案例一
option = {
    title: {
        left:'center',
        top:'3%',
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['蒸发量', '降水量'],
        top:'10%'
    },
    toolbox: {
        show: true,
        top:'10%',
        feature: {
            dataView: {show: true, readOnly: false},//数据视图
            magicType: {show: true, type: ['line', 'bar']},//切换数据图类型
            restore: {show: true},//刷新数据
            saveAsImage: {show: true}//保存图片
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',//数据类型,类目
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value'//可以不写,默认value
        }
    ],
    grid: {
            top: '20%',//距离dom容器顶部
            right:'10%',//...右侧
            bottom:'10%',//底部
            left:'10%'//左侧
        },
    series: [
        {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint: {
                data: [
                    {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                    {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};
案例一效果图

image

案例二
option = {
    backgroundColor:'#323a5e',//背景色
    tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
          }
        },
    grid: {
        left: '10%',
        right: '10%',
        bottom: '20%',
        top:'20%',
        containLabel: true//是否包含刻度尺,默认不包含
    },
    legend:{//图例组件
          data: ['累计确诊', '治愈数', '死亡数'],//这里的data值要和series里每一组数据的name相同
          right: 'center',
          top:'10%',
          textStyle: {
            color: "#fff"
          },
          itemWidth: 12,//图例组件宽度
          itemHeight: 10,//图例组件高度
        itemGap: 35//每项之间的间隔
    },
    xAxis:{
          type: 'category',
          data: ['美国','意大利','西班牙','德国','法国','伊朗','葡萄牙','以色列'],
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
        },
    yAxis:{
        type: 'value',
        max:'20000',//纵坐标轴的最大刻度
        axisLine: {
            show: false,//不显示纵坐标轴
            lineStyle: {
              color: 'white'
            }
          },
        splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
        axisLabel: {}
    },
    series: [
        {
          name: '累计确诊',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#fccb05'
                }, {
                    offset: 1,
                    color: '#f5804d'
                }]),
                barBorderRadius: 12,
            },
          },
          data: [160020, 101739, 85195, 66885, 44550, 41495,  6480, 4695]
        },
        {
          name: '治愈数',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#8bd46e'
                }, {
                    offset: 1,
                    color: '#09bcb7'
                }]),
                barBorderRadius: 11,
            }
          },
           data: [5595, 14620, 16780, 13500, 7924, 13911,256, 3302]
        },
        {
          name: '死亡数',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#248ff7'
                }, {
                    offset: 1,
                    color: '#6851f1'
                }]),
            barBorderRadius: 11,
            }
          },
          data: [2953, 11591, 7340, 645, 3024, 2757, 1408, 180]
        }],
    dataZoom: [//滑动组件
            {
            type:"slider",//水平滑块,选择区间
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom:'8%',
            start: 10,
            end: 90,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle:{
            color:"#d3dee5",
          },
          textStyle:{ color:"#fff"},
          borderColor:"#90979c"
        },
        {
          type: "inside",//纵向滑动,缩放
          show: true,
          height: 15,
          start: 1,
          end: 35
        }
    ],
};
案例二 效果图

image

饼图

案例一
option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}例 ({d}%)'//提示框显示内容的格式【{a}:系列名/{b}:数据名/{c}:数据值/{d}:百分比】
    },
    legend: {
        orient: 'horizontal',//图例方向【'horizontal'\'vertical'】
        left: 'center',
        top:'10%',
        data: ['美国', '意大利', '西班牙', '德国', '法国','伊朗','英国','瑞士','比利时','荷兰','土耳其','韩国']
    },
    series: [
        {
            name: '新冠疫情数据图',
            type: 'pie',
            radius: ['0%', '40%'],//范围0-100
            center: ['50%', '50%'],
            label: {
                show: false,
                position: 'outside'//标签的位置【inside/outside/inner/center】
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            label: {
                show: true
            },
            data: [
                {value: 160020, name: '美国'},
                {value: 101739, name: '意大利'},
                {value: 85195, name: '西班牙'},
                {value: 66885, name: '德国'},
                {value: 44550, name: '法国'},
                {value: 41495, name: '伊朗'},
                {value: 22141, name: '英国'},
                {value: 15760, name: '瑞士'},
                {value: 11899, name: '比利时'},
                {value: 11750, name: '荷兰'},
                {value: 10827, name: '土耳其'},
                {value: 9786, name: '法国'},
            ]
        },
    ]
};
案例一效果图

image

案例二
var legenddata = [
{name:'美国',Confirmed:85840,Dead:1296},
{name:'意大利',Confirmed:80589,Dead:8215},
{name:'西班牙',Confirmed:57786,Dead:4365},
{name:'德国',Confirmed:43938,Dead:267},
{name:'法国',Confirmed:29566,Dead:1698},
{name:'伊朗',Confirmed:29406,Dead:2234},
{name:'英国',Confirmed:11812,Dead:580},
{name:'瑞士',Confirmed:11811,Dead:191},
{name:'韩国',Confirmed:9332,Dead:139},
{name:'荷兰',Confirmed:7469,Dead:435},
{name:'奥地利',Confirmed:6909,Dead:49},
{name:'比利时',Confirmed:6235,Dead:220},
{name:'加拿大',Confirmed:4046,Dead:39},
{name:'土耳其',Confirmed:3629,Dead:75},
{name:'葡萄牙',Confirmed:3544,Dead:60},
{name:'挪威',Confirmed:3372,Dead:14},
{name:'澳大利亚',Confirmed:2991,Dead:13},
{name:'巴西',Confirmed:2985,Dead:77},
{name:'瑞典',Confirmed:2840,Dead:77},
{name:'以色列',Confirmed:2693,Dead:8}
],
 option = {
    toolbox: {
        show: true,//false则不显示工具栏
        feature: {
            saveAsImage: {show: true,type:'jpeg'}
        },
        top:'10%',
        right:"5%"
    },
    title: {
        text: '人民日报式海外疫情玫瑰图',
        subtext: '\n使用2020-03-27数据',
        x: '60%',
        y: '150',
        textStyle:
        {fontSize:27,
        fontWeight:'bold',
        fontFamily:'Microsoft YaHei',
        color:'#000'
        },
        subtextStyle:
        {
            fontStyle:'italic',
			fontSize:14
        }
    },
     legend: {
        x: '60%',//水平位置,【left\center\right\数字】
        y: '350',//垂直位置,【top\center\bottom\数字】
        align:'left',//字在图例的左边或右边【left/right】
        orient:'vertical',//图例方向【horizontal/vertical】
        icon: "circle",   //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
        textStyle://图例文字
        {
            fontFamily:'微软雅黑',
            color:'#000',
        },
        data: ['美国','意大利','西班牙','德国','法国','伊朗','英国','瑞士','韩国','荷兰','','奥地利','比利时','加拿大','土耳其','葡萄牙','挪威','澳大利亚','巴西','瑞典'],
        formatter: function(params)  {
            console.log('图例参数',params) 
            for (var i=0;i<legenddata.length;i++){
                  if (legenddata[i].name== params){
                      return params+"\t确诊:"+legenddata[i].Confirmed+"\t死亡:"+legenddata[i].Dead;
                     }
              }
        } 
     },
	calculable: true,
    series: [
        {
            name: '半径模式',
            type: 'pie',
            clockWise: false ,
            radius: [20, 400],
            center: ['40%', '60%'],
            roseType: 'area',
			label:{
			    show:true,
			    position: 'inside'//标签的位置【inside/outside/inner/center】
			},
            data:[
                    {name:'美国',value:292.9846412,},
                    {name:'意大利',value:283.8820177},
                    {name:'西班牙',value:240.3871877},
                    {name:'德国',value:209.6139308},
                    {name:'法国',value:171.9476665},
                    {name:'伊朗',value:171.4817775},
                    {name:'英国',value:108.6830254},
                    {name:'瑞士',value:108.6784247},
                    {name:'韩国',value:96.60227741},
                    {name:'荷兰',value:86.42337647},
                    {name:'奥地利',value:83.12039461},
                    {name:'比利时',value:78.96201618},
                    {name:'加拿大',value:63.60817558},
                    {name:'土耳其',value:60.24118193},
                    {name:'葡萄牙',value:59.53150426},
                    {name:'挪威',value:58.06892456},
                    {name:'澳大利亚',value:54.69003566},
                    {name:'巴西',value:54.63515352},
                    {name:'瑞典',value:53.29165038}]
        },
        {
            name:'透明圆圈',
            type:'pie',
            radius: [10,27],
            center: ['40%', '60%'],
            itemStyle: {
                    color: 'rgba(250, 250, 250, 0.3)',
    },
            data:[
                {value:10,name:''}
            ]
        },
        {
            name:'透明圆圈',
            type:'pie',
            radius: [10,35],
            center: ['40%', '60%'],
            itemStyle: {
                    color: 'rgba(250, 250, 250, 0.3)',
    },
            data:[
                {value:10,name:''}
            ]
        }
            ] 
};
案例二 效果图

image

散点图

案例一
var dataAll = [
        [10.0, 8.04],
        [8.0, 6.95],
        [13.0, 7.58],
        [9.0, 8.81],
        [11.0, 8.33],
        [14.0, 9.96],
        [6.0, 7.24],
        [4.0, 4.26],
        [12.0, 10.84],
        [7.0, 4.82],
        [5.0, 5.68],
        [10.0, 9.14],
        [8.0, 8.14],
        [13.0, 8.74],
        [9.0, 8.77],
        [11.0, 9.26],
        [14.0, 8.10],
        [6.0, 6.13],
        [4.0, 3.10],
        [12.0, 9.13],
        [7.0, 7.26],
        [5.0, 4.74],
        [10.0, 7.46],
        [8.0, 6.77],
        [13.0, 12.74],
        [9.0, 7.11],
        [11.0, 7.81],
        [14.0, 8.84],
        [6.0, 6.08],
        [4.0, 5.39],
        [12.0, 8.15],
        [7.0, 6.42],
        [5.0, 5.73],
        [8.0, 6.58],
        [8.0, 5.76],
        [8.0, 7.71],
        [8.0, 8.84],
        [8.0, 8.47],
        [8.0, 7.04],
        [8.0, 5.25],
        [19.0, 12.50],
        [8.0, 5.56],
        [8.0, 7.91],
        [8.0, 6.89],
];
option = {
    title: {
        text: '散点图案例',
        left: 'center',
        top: 0
    },
    grid: {
    },
    tooltip: {
        formatter: '坐标 ({c})'
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {},
    series: [
        {
            name: 'I',
            type: 'scatter',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: dataAll,
        }
    ]
};
案例一效果图

image

雷达图

案例一
option = {
    backgroundColor: '#101736',
    color: ['#4A99FF', '#4BFFFC'], //颜色,
    legend: {
        orient: 'vertical',
        icon: 'circle', //图例形状
        data: ['车辆数', '设计车位'], //图例,
        bottom: 35,
        right: 40,
        itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
        itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
        itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔,纵向布局时为纵向间隔。
        textStyle: {
            fontSize: 14,
            color: '#00E4FF',
        },
    },
    radar: {
        shape: 'polygon', //雷达绘制类型,默认多边形polygon【'polygon'/'circle'】
        name: {
            textStyle: {
                color: '#fff',
                fontSize: 16
            },
        },
        indicator: [{
                text: '小型车',
                max: 5000
            },
            {
                text: '中型车',
                max: 5000
            },
            {
                text: '大型车',
                max: 5000
            },
            {
                text: '货  车',
                max: 5000
            },
            {
                text: '特种车',
                max: 5000
            },
            {
                text: '贵宾车',
                max: 5000
            },
        ],
        splitArea: { // 坐标轴在 grid 区域中的分隔区域,默认不显示。
            show: true,
            areaStyle: { // 分隔区域的样式设置。
                color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            }
        },
        axisLine: { //指向外圈文本的分隔线样式
            //show:false,//默认true
            lineStyle: {
                color: '#153269'
            }
        },
        splitLine: { //分割线
            //show:false,//默认显示
            lineStyle: {
                color: '#113865', // 分隔线颜色
                width: 1, // 分隔线线宽
            }
        },
    },
    series: [{
        name: '车辆数',
        type: 'radar',
        symbolSize: 5, //坐标轴上的点的大小
        symbol: 'angle', //点的样式,默认circle【circle/rect/roundRect/triangle/diamond/pin/arrow/none】
        data: [{
                value: [4300, 4700, 3600, 3900, 3800, 4200],
                itemStyle: {
                    lineStyle: {
                        color: '#4A99FF',
                    },
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0, //右
                        y: 0, //下
                        x2: 1, //左
                        y2: 1, //上
                        colorStops: [{
                            offset: 0,
                            color: '#4A99FF'
                        }, {
                            offset: 0.5,
                            color: 'rgba(0,0,0,0)'
                        }, {
                            offset: 1,
                            color: '#4A99FF'
                        }],
                        globalCoord: false
                    },
                    opacity: 1 // 区域透明度
                }
            },
            {
                name: '设计车位',
                value: [3200, 3000, 3400, 2000, 3900, 2000],
                itemStyle: {
                    normal: {
                        lineStyle: {
                            color: '#4BFFFC',
                        },
                        shadowColor: '#4BFFFC',
                        shadowBlur: 10,
                    },
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0, //右
                        y: 0, //下
                        x2: 1, //左
                        y2: 1, //上
                        colorStops: [{
                            offset: 0,
                            color: '#4BFFFC'
                        }, {
                            offset: 0.5,
                            color: 'rgba(0,0,0,0)'
                        }, {
                            offset: 1,
                            color: '#4BFFFC'
                        }],
                        globalCoord: false
                    },
                    opacity: 1 // 区域透明度
                }
            }
        ]
    }]
};
案例一效果图

image

地图

案例一

//数据
window.dataList = [
    {name: "南海诸岛",value: 0},
    {name: '北京',value: 54},
    {name: '天津',value: 13},
    {name: '上海',value: 40},
    {name: '重庆',value: 75},
    {name: '河北',value: 13},
    {name: '河南',value: 83},
    {name: '云南',value: 11},
    {name: '辽宁',value: 19},
    {name: '黑龙江',value: 15},
    {name: '湖南',value: 69},
    {name: '安徽',value: 60},
    {name: '山东',value: 39},
    {name: '新疆',value: 4},
    {name: '江苏',value: 31},
    {name: '浙江',value: 104},
    {name: '江西',value: 36},
    {name: '湖北',value: 1052},
    {name: '广西',value: 33},
    {name: '甘肃',value: 7},
    {name: '山西',value: 9},
    {name: '内蒙古',value: 7},
    {name: '陕西',value: 22},
    {name: '吉林',value: 4},
    {name: '福建',value: 18},
    {name: '贵州',value: 5},
    {name: '广东',value: 98},
    {name: '青海',value: 1},
    {name: '西藏',value: 0},
    {name: '四川',value: 44},
    {name: '宁夏',value: 4},
    {name: '海南',value: 22},
    {name: '台湾',value: 3},
    {name: '香港',value: 5},
    {name: '澳门',value: 5}
];
option = {
    title:{
        text:'早期新型冠状病毒感染分布图',//大标题
        subtext:"数据来自2020-01-25日"//副标题
    },
    tooltip: {//提示框
        triggerOn: "mousemove",//提示框触发【mousemove/click/mousemove|click/none】
    },
    visualMap: {
        type:'piecewise',//数据展示类型默认piecewise为分段型展示,【piecewise/continuous】
        min: 0,
        max: 1000,
        left: 26,
        bottom: 40,
        showLabel: !0,
        text: ["高", "低"],
        pieces: [{
            gt: 100,
            label: "> 100 人",
            color: "#7f1100"
        }, {
            gte: 10,
            lte: 100,
            label: "10 - 100 人",
            color: "#ff5428"
        }, {
            gte: 1,
            lt: 10,
            label: "1 - 9 人",
            color: "#ff8c71"
        }, {
            gt: 0,
            lt: 1,
            label: "疑似",
            color: "#ffd768"
        }, {
            value: 0,
            color: "#ffffff"
        }],
        show: true//可以不写,默认是显示
    },
    geo: {
        map: "china",
        roam: false,//是否开启鼠标缩放和平移漫游,默认不开起【scale/move/false/true】
        scaleLimit: {
            min: 1,
            max: 2
        },
        zoom: 1.0,//当前视角缩放比例
        top: 120,
        label: {
            normal: {
                show: !0,
                fontSize: "14",
                color: "rgba(0,0,0,0.7)"
            }
        },
        itemStyle: {
            normal: {
                borderColor: "rgba(0, 0, 0, 0.2)"//边框颜色
            },
            emphasis: {
                areaColor: "#f2d5ad",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderWidth: 0
            }
        }
    },
    series: [{
        name: "确诊病例",
        type: "map",
        map:"china",//可以不写
        geoIndex: 0,
        data: window.dataList
    }]
};
案例一效果图

image


原文链接:https://www.cnblogs.com/taixiang/p/12664952.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:利用css 实现 视觉差效果

下一篇:Web前端开发难吗?都要学习哪些内容?