您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Echarts图表工具介绍

目录

下载网址: https://www.bootcdn.cn/echarts/

使用步骤:

1.基础配置修改:

目录

下载网址: https://www.bootcdn.cn/echarts/

使用步骤:

1.基础配置修改:

(1)title:标题组件,包含主标题和副标题

(2) tooltip:提示框组件

(3)legend:图例组件展现了不同系列的标记(symbol),颜色和名字

(4)xAxis:x轴配置 直角坐标系 grid 中的 x 轴

(5)yAxis:y轴配置 y轴默认不写数据 自动分配y轴的值

(6)series

2.折线图配置

3.地图


 

(1)title:标题组件,包含主标题和副标题

(2) tooltip:提示框组件

(3)legend:图例组件展现了不同系列的标记(symbol),颜色和名字

(4)xAxis:x轴配置 直角坐标系 grid 中的 x 轴

(5)yAxis:y轴配置 y轴默认不写数据 自动分配y轴的值

(6)series

2.折线图配置

3.地图


tooltip下载4.8版本,后缀为echarts.min.js

下载网址: https://www.bootcdn.cn/echarts/

使用步骤:

①基于准备好的dom,初始化echarts实例  echarts.init()

②配置项

③ 渲染显示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 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

1.基础配置修改:

(1)title:标题组件,包含主标题和副标题

let option={
     title: { //标题组件,包含主标题和副标题
                show: false, //是否显示标题组件
                text: '风险交易数据检测', //主标题文本,支持使用 \n 换行
                textStyle: {
                    // color:'#fff',//主标题文字的颜色
                    fontSize: 16, //字体大小
                },
                link: 'https://www.baidu.com', //主标题文本超链接
                target: 'blank', //指定窗口打开主标题超链接
                subtext: '副标题',
                sublink: '',
                subtarget: '',
                subtextStyle: { //副标题的样式

                },
                // textAlign:'center',//不常用 主标题和副标题 组件对齐方式(容器左边参考)
                padding: 10, //标题与边框距离
                itemGap: 10, //主副标题之间的间距
                left: 'left', //title 组件离容器左侧的距离
            },
}

(2) tooltip:提示框组件

let option={
   tooltip: { //提示框组件
                // trigger: 'axis', //触发类型 axis柱状图和折线图
                // formatter:'',//提示框浮层内容格式器,支持字符串模板和回调函数两种形式
                //1.字符串模板(推荐)  {a}(系列名称),{b}(类目值),{c}(数值)
                // formatter:'{a0}-{b0}-{c0}<br/>{a1}-{b1}-{c1}'

            },
}

(3)legend:图例组件展现了不同系列的标记(symbol),颜色和名字

let option={
    legend: { //图例组件展现了不同系列的标记(symbol),颜色和名字
                left: 'left', //图例组件离容器左侧的距离
                textStyle: {
                    color: '#999'
                },
                orient: 'vertical', //图例列表的布局朝向 系列的布局水平和垂直
                // icon:"diamond",//图例项的 icon 
                //可以通过 'image://url' 设置为图片,其中 URL 为图片的链接
                icon: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
                data: ['销量', { //系列内容名称 
                    name: '利润',
                    // 强制设置图形为圆。
                    icon: 'circle',
                    // 设置文本为红色
                    textStyle: {
                        color: 'red'
                    }
                }],

            },
}

(4)xAxis:x轴配置 直角坐标系 grid 中的 x 轴

let option={
    xAxis: { //x轴配置 直角坐标系 grid 中的 x 轴
                axisLine: { //坐标轴轴线相关设置
                    show: false,
                    lineStyle: { //
                        color: 'blue', //坐标轴线线的颜色 线的颜色修改后 刻度线和label都修改样式
                        width: 1, //线宽度
                        // type:''
                    }
                },
                axisTick: { //坐标轴刻度相关设置
                    show: false, //是否显示坐标轴刻度
                    alignWithLabel: true, //中间位置显示线
                },
                axisLabel: { //坐标轴刻度标签的相关设置。
                    color: 'green', //刻度标签文字的颜色
                },
                splitLine: { //坐标轴在 grid 区域中的分隔线
                    show: false
                },
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
}

(5)yAxis:y轴配置 y轴默认不写数据 自动分配y轴的值

let option={
    yAxis: { //y轴配置 y轴默认不写数据 自动分配y轴的值
                axisLine: { //坐标轴轴线相关设置
                    show: false,
                    lineStyle: {
                        color: 'green'
                    }
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed', //虚线
                    }
                }
            },
}

(6)series

let option={
    series: [{ //[{},{}]
                name: '销量',
                type: 'bar', //bar柱状图  line折线
                // showBackground:true,//是否显示柱条的背景色
                // backgroundStyle:{},//修改背景样式
                label: { //图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
                    // show: true, //是否显示标签
                    fontSize: 14,
                },
                itemStyle: { //图形样式
                    // color:'#888',//柱条颜色
                    // borderRadius:20,
                    barBorderRadius: [20, 20, 0, 0], //圆角 柱条
                    //渐变颜色--柱条
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#00B9EE' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#0770EE' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    opacity:0.8
                },
                emphasis: { //高亮的图形样式和标签样式
                    label: {
                        color: 'red',
                        show:true
                    },
                    itemStyle: {
                        color: 'pink'
                    }
                },
                barWidth: '30', //柱条的宽度,不设时自适应
                data: [50, 20, 36, 10, 10, 20]
            }]
}

2.折线图配置

 grid: { //直角坐标系内绘图网格
                left: 0, //grid 组件离容器左侧的距离
                bottom: 0,
                right: 30,
                containLabel: true, //grid 区域是否包含坐标轴的刻度标签
            },
 xAxis: {
    boundaryGap: false, //留白策略  x轴的位置起点从0开始
}
series: [{
                name: '销量',
                type: 'line',
                label: { //图形上的文本标签,可用于说明图形的一些数据信息
                    // show: true, //
                    color: 'red', //文字的颜色
                },
                endLabel: {
                    show: true, //是否显示标签
                },
                itemStyle: { //折线拐点标志的样式
                    color: 'green',
                    // borderColor:'red',//图形的描边颜色
                    // borderType:'solid',
                    borderWidth: 0, //描边线宽。为 0 时无描边
                    opacity :0,
                },
                lineStyle: { //线条样式
                    color: '#333'
                },
                areaStyle: { //区域填充样式。设置后显示成区域面积图
                    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
                    },
                    opacity:0.5 
                },
                smooth:true,//是否平滑曲线显示
                data: [5, 40, 16, 30, 10, 20]
            }]

3.地图


<!-- 
    地图的使用步骤:
        1.引入echarts.js 再引入china.js 文件
        2.创建容器  js获取初始化 设置显示地图
        3.注意地图数据: 柱状图-折线图-(数组) 饼状图和地图-(数组对象[{},{}])
 -->
<div id="china_chart" style="width: 1000px;height:560px;border:1px solid #999;"></div>

<script charset="utf-8">
    var china_chart = echarts.init(document.getElementById('china_chart'));
    //数据纯属虚构  [{城市:数据,...}]
    var data = [
        {
            name: '江苏',
            value: 1
        },
        {
            name: '北京',
            value: 0
        },
        {
            name: '上海',
            value: 68
        },
        {
            name: '重庆',
            value: 23
        },
        {
            name: '河北',
            value: 34
        },
        {
            name: '河南',
            value: 32
        },
        {
            name: '云南',
            value: 16
        },
        {
            name: '辽宁',
            value: 43
        },
        {
            name: '黑龙江',
            value: 81
        },
        {
            name: '湖南',
            value: 24
        },
        {
            name: '安徽',
            value: 33
        },
        {
            name: '山东',
            value: 54
        },
        {
            name: '新疆',
            value: 18
        },
        {
            name: '浙江',
            value: 44
        },
        {
            name: '江西',
            value: 22
        },
        {
            name: '湖北',
            value: 21
        },
        {
            name: '广西',
            value: 30
        },
        {
            name: '甘肃',
            value: 12
        },
        {
            name: '山西',
            value: 32
        },
        {
            name: '内蒙古',
            value: 35
        },
        {
            name: '陕西',
            value: 25
        },
        {
            name: '吉林',
            value: 45
        },
        {
            name: '福建',
            value: 28
        },
        {
            name: '贵州',
            value: 18
        },
        {
            name: '广东',
            value: 37
        },
        {
            name: '青海',
            value: 6
        },
        {
            name: '西藏',
            value: 4
        },
        {
            name: '四川',
            value: 33
        },
        {
            name: '宁夏',
            value: 8
        },
        {
            name: '海南',
            value: 19
        },
        {
            name: '台湾',
            value: 1
        },
        {
            name: '香港',
            value: 1
        },
        {
            name: '澳门',
            value: 1
        }
    ];

    var option = {
        tooltip: {//悬浮弹框 1.字符串格式  2.函数回调
            //函数  params形参  参数表示是data里面的每一项数据 {}对象
            formatter: function(aa) {
                //data series里面数据 =[{name:'',value:''},{}]
                return aa.name + ':' + aa.value;
            },
            // formatter:'{a}-{b}:{c}',
        },
        visualMap: [{//visualMap 是视觉映射组件,用于进行『视觉编码 visualMap:图注样式定制,其中包括color范围,文字提示
            type: 'piecewise',//分段型视觉映射组件
            //   自定义『分段式视觉映射组件 的每一段的范围,以及每一段的文字,以及每一段的特别的样式
            pieces:[
                {min: 1000,  label: '>=1000',color: '#E64546'},
                {min: 100, max: 999, label: '100-999',color: '#F57567'},
                {min: 10, max: 99, label: '10-99',color: '#FF9985'},
                {min: 1, max: 9, label: '1-9',color: '#FFE5DB'},
                {max: 1, label: '0',color: '#fff'},
            ]

        }],
        geo: {//地理坐标系组件 geo:定义地图为china 常用zoom
            map: 'china',//地图类型。ECharts 3 中因为地图精度的提高,不再内置地图数据增大代码体积 map/js/china.js
            zoom:1,//视角缩放比例  
            label:{//地图对策城市名称显示
                show:true
            },
            emphasis:{//高亮
                label: {//地图的标签名字
                    show: true
                },
                itemStyle: {//区域样式 hover样式
                    areaColor: 'pink'
                }
            }
        },
        series: [
            {
                name: '中国地图',//{a}{b}{c}
                type: 'map',//地图map
                geoIndex: 0, //映射visualMap 颜色配置
                data: data
            }]
    };

    china_chart.setOption(option);

</script>

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进