echars各种图表

最新推荐文章于 2024-05-28 11:11:34 发布
最新推荐文章于 2024-05-28 11:11:34 发布
阅读量296 收藏
点赞数
分类专栏： VUE 文章标签： echars
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Seven_Amber/article/details/104698605
版权

 图表vue文件：


        <div class="content">
            <div class="tit">
                <h1>数据统计</h1>
                <span>Data statistics</span>
            </div>
            <div class="charts">
                <div class="chart-item">
                    <div class="tit">数据统计标题</div>
                    <div class="chart" id="chart1"></div>
                </div>
                <div class="chart-item">
                    <div class="tit">数据统计标题</div>
                    <div class="chart" id="chart2"></div>
                </div>
                <div class="chart-item">
                    <div class="tit">数据统计标题</div>
                    <div class="chart" id="chart3"></div>
                </div>
                <div class="chart-item">
                    <div class="tit">数据统计标题</div>
                    <div class="chart" id="chart4">
                        <div class="chart-li">数据名称标题<span>00</span>单位</div>
                        <div class="chart-li">数据名称标题<span>00</span>单位</div>
                        <div class="chart-li">数据名称标题<span>00</span>单位</div>
                        <div class="chart-li">数据名称标题<span>00</span>单位</div>
                        <div class="chart-li">数据名称标题<span>00</span>单位</div>
                        <div class="chart-li">数据名称标题<span>00</span>单位</div>
                        <div class="chart-li">数据名称标题<span>00</span>单位</div>
                        <div class="chart-li">数据名称标题<span>00</span>单位</div>
                    </div>
                </div>
                <div class="chart-item">
                    <div class="tit">数据统计标题</div>
                    <div class="chart" id="chart5"></div>
                </div>
                <div class="chart-item">
                    <div class="tit">数据统计标题</div>
                    <div class="chart" id="chart6"></div>
                </div>
                <div class="chart-item">
                    <div class="tit">数据统计标题</div>
                    <div class="chart" id="chart7"></div>
                </div>
                <div class="chart-item">
                    <div class="tit">数据统计标题</div>
                    <div class="chart" id="chart8"></div>
                </div>
                <div class="chart-item">
                    <div class="tit">数据统计标题</div>
                    <div class="chart" id="chart9"></div>
                </div>
            </div>
        </div>

样式调整 scss：

.charts {
    width: 1000px;
    margin: 0 auto;
    .chart-item {
        width: 30%;
        height: 250px;
        display: inline-block;
        vertical-align: middle;
        margin: 10px;
        .tit {
            text-align: left;
            border-bottom: #000 1px solid;
            color: #198fec;
            font-size: 18px;
        }
        .chart {
            width: 100%;
            height: 180px;
            .chart-li {
                width: 145px;
                color: #333;
                font-size: 12px;
                line-height: 40px;
                display: inline-block;
                span {
                    font-size: 24px;
                    color: #198fec;
                    font-weight: 600;
                }
            }
        }
    }
}

js配置数据：

myColorList = [
    "#71c7d5",
    "#6ec3ad",
    "#6dbb5c",
    "#40b263",
    "#1b923b",
    "#198fec",
    "#ff9933",
    "#ffff8e",
    "#ff6f8e",
    "#ff6fff"
]

option1 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: 10,
        top: 60,
        bottom: 30,
        data: ["数据名称一", "数据名称二", "数据名称三", "数据名称四"]
    },
    series: [{
        name: '数据值',
        type: 'pie',
        radius: '75%',
        center: ['30%', '45%'],
        data: [
            { value: 335, name: '数据名称一' },
            { value: 310, name: '数据名称二' },
            { value: 234, name: '数据名称三' },
            { value: 135, name: '数据名称四' }
        ],
        label: {
            normal: {
                show: false,
                position: 'center'
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        itemStyle: {
            emphasis: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            normal: {
                color: function(params) {
                    //自定义颜色
                    var colorList = myColorList
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
};
option2 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ["数据名称四", "数据名称三", "数据名称二", "数据名称一"]
    },
    series: [{
        name: '数据',
        type: 'bar',
        data: [30, 30, 80, 100],
        itemStyle: {
            normal: {
                color: function(params) {
                    //自定义颜色
                    var colorList = myColorList
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
};
option3 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ["数据名称四", "数据名称三", "数据名称二", "数据名称一"]
    },
    series: [{
        name: '数据',
        type: 'bar',
        data: [50, 30, 80, 100],
        itemStyle: {
            normal: {
                color: function(params) {
                    //自定义颜色
                    var colorList = myColorList
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
};
// option4={};
option5 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['数据一', '数据二']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
            name: '数据一',
            type: 'line',
            symbol: 'none',
            // stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210],
            color: ['#6dbb5c'], //折线颜色
            areaStyle: {
                normal: {
                    color: '#6dbb5c'
                }
            },
        },
        {
            name: '数据二',
            type: 'line',
            symbol: 'none',
            // stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310],
            color: ['#6ec3ad'], //折线颜色,
            areaStyle: {
                normal: {
                    color: '#6ec3ad'
                }
            }
        }
    ]
};
option6 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件', '广告', '视频', '访问']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
            name: '邮件',
            type: 'line',
            smooth: true,
            symbol: 'none',
            color: ['#71c7d5'], //折线颜色
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '广告',
            type: 'line',
            smooth: true,
            symbol: 'none',
            color: ['#6ec3ad'], //折线颜色
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频',
            type: 'line',
            smooth: true,
            symbol: 'none',
            color: ['#6dbb5c'], //折线颜色
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '访问',
            type: 'line',
            smooth: true,
            symbol: 'none',
            color: ['#40b263'], //折线颜色
            data: [320, 332, 301, 334, 390, 330, 320]
        }
    ]
};
option7 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: 10,
        top: 60,
        bottom: 30,
        data: ["数据名称一", "数据名称二", "数据名称三", "数据名称四"]
    },
    series: [{
        name: '数据值',
        type: 'pie',
        radius: ['30%', '75%'],
        center: ['30%', '45%'],
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold'
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [
            { value: 335, name: '数据名称一' },
            { value: 310, name: '数据名称二' },
            { value: 234, name: '数据名称三' },
            { value: 135, name: '数据名称四' }
        ],
        itemStyle: {
            emphasis: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            normal: {
                color: function(params) {
                    //自定义颜色
                    var colorList = myColorList
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
};
option8 = {
    color: ['#3398DB'],
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
            alignWithLabel: true
        }
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [220, 52, 200, 334, 390, 330, 60],
        itemStyle: {
            normal: {
                color: function(params) {
                    //自定义颜色
                    var colorList = myColorList
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
};
option9 = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
    },
    yAxis: {
        type: 'value'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    series: [{
        data: [10, 90, 61, 34, 90, 30, 60, 34, 90, 30, 20],
        type: 'line',
        smooth: true,
        symbol: 'none',
        color: ['#71c7d5'], //折线颜色
        areaStyle: {}
    }]
};

// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
var myChart2 = echarts.init(document.getElementById('chart2'));
var myChart3 = echarts.init(document.getElementById('chart3'));
// var myChart4 = echarts.init(document.getElementById('chart4'));
var myChart5 = echarts.init(document.getElementById('chart5'));
var myChart6 = echarts.init(document.getElementById('chart6'));
var myChart7 = echarts.init(document.getElementById('chart7'));
var myChart8 = echarts.init(document.getElementById('chart8'));
var myChart9 = echarts.init(document.getElementById('chart9'));
// 用指定的配置项和数据显示图表。
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option3);
// myChart4.setOption(option4);
myChart5.setOption(option5);
myChart6.setOption(option6);
myChart7.setOption(option7);
myChart8.setOption(option8);
myChart9.setOption(option9);

 

黑暗中跳舞的月亮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts数据可视化--常用图表类型
小马哥的博客
03-10 1万+
数据可视化
vue-echarts主题切换+选择面板实现
Ctrl-a-c-v44220970的博客
01-07 3472
通过实现主题选择面板，更方便的对echarts图表进行主题的切换，并且支持饼状图、折线图、柱状图等多类型echarts图表。
数据可视化ECharts的常用图表，看完就会用(2)
zag666的博客
03-31 7369
ECharts七大常用图表：柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图 本文主要介绍后四个图表， 文章目录四、饼图五、地图六、雷达图 四、饼图 饼图的数据是由name和value组成的字典所形成的数组；饼图无须配置xAxis和yAxis。 特点：饼图可以很好地帮助用户快速了解不同分类的数据的占比情况。 var pieData = [ { name: '淘宝', value: 11231 }, { name: '京东', value: 22673 },
echarts(7大基础图表)的使用
最新发布
qq_44930306的博客
05-28 1532
echarts基础应用
最全echarts可视化图表综合
qq_44242030的博客
11-18 2240
前言 在前端漫长的开发生涯中，相信大家都会遇到各种echarts图表，那么要怎么去实现这些echarts图表呢，其实可以通过echarts官方api配合vue来实现这些操作，下面将从安装到使用以及图表的配置项包括每一个环节比较容易出现的问题来为大家进行详解。 安装echarts图表 使用echarts图表 echarts图表那些你一定会用到的配置项 一、安装echarts图表 echarts的安装呢其实非常的容易，简单来说只需要两步： 在下载echarts时，很多人可能会遇到安装不成功或者报错的问
echarts k 线图
aibujin的博客
05-16 3510
Echarts 常用各类图表模板配置 注意： 这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项； 以下代码都可以复制到 Echarts 官网，直接预览； 图标模板目录Echarts 常用各类图表模板配置一、K 线图二、环形图 一、K 线图 const upColor = '#32E5FF'; const downColor = '#F7517F'; function splitData(rawData) { let categoryData = []; let value
echarts各种图表
05-10
在"echarts各种图表"这个主题中，我们将深入探讨ECharts的使用方法及其各种图表类型的应用。 首先，让我们从折线图开始。折线图是用于展示连续性数据变化趋势的图表，比如时间序列数据。在ECharts中，我们可以通过...
echarts图表导出excel示例
09-04
在本文中，我们将深入探讨如何使用ECharts图表库来实现数据的导出功能，特别是将图表数据导出为Excel格式。ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互性，广泛应用于Web应用...
Echarts 地图图表示例
11-10
在JavaScript中，ECharts提供了一系列API供开发者调用，例如`resize()`用于图表自适应窗口大小，`dispatchAction()`用于触发图表上的各种动作，`getZoomOnPosition()`获取当前地图的缩放比例和中心位置等。...
html-echarts考勤图表
02-27
1.echarts考勤图表
使用ECharts构建图表
10-19
ECharts案例测试
Echarts图表的基本使用
动感超人的博客
05-16 2241
Echarts的初始化使用 引入什么的就不多说了,普通的js脚本怎么引入echarts就怎么引入 大概初始化的步骤 获取DOM(用于绘制表格) 依据获取的DOM对象初始化echarts(使得这个DOM对象用于展示图表数据) 书写echarts配置对象 第二步返回的echarts对象调用setOption方法并传入第三步书写的配置对象 别忘记设置Dom容器的宽高了(css设置即可) 好像如果是同一个echarts实例化对象,再次调用setOption方法,不会造成图表全部重新绘制,
echarts统计图表
weixin_49107940的博客
09-20 1343
ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
如何使用Echarts创建动态K线图
Loyar的博客
06-23 6965
如何使用Echarts创建动态K线图 一：了解组件 首先来看官方的例子和使用文档 Echarts官方实例-----点击此处 我们可以看到有多重的图形和格式可以供我们选择，我们在此选择K线图。 我们选择该种K线图进行测试。 二：下载组件 Echarts下载链接 GitHub地址下载 三：Demo实现 首先创建一个没有母版页的空页面（使用.cshtml实现,该组件嵌入html和cshtml均可，无区别） @{ Layout = null; } <!DOCTYPE html> <h
echarts图表的使用
yungpheng的博客
11-10 7897
一、介绍 ECharts，一个纯 Javascript 的图表库，可以流畅的运行在PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，
vue+Echarts绘制k线图(二)--分时图和交易量图
蓑笠翁
03-13 6469
使用vue+Echarts绘制k线图中的分时图、交易量图详解
图表制作办公首选--实用图表工具Echars
CODEING一场空的博客
06-24 1667
由于工作的需要，在写材料的时候需要使用到柱状图、饼状图、折线图等等展示数据，可以使用PPT等办公软件构建出图表，在这里可以使用更加方便、更加美观的工具Echars。
前端vue echart自定义图表(柱形图 折线图 饼图 树形结构图 关系图谱 )
chenchuang0128的博客
05-30 5858
前端组件化开发：使用ECharts快速实现自定义图表摘要：随着前端开发技术的发展，组件化开发已成为提高开发效率和降低维护成本的有效手段。本文将介绍如何使用ECharts库进行前端组件化开发，快速实现自定义的图表，包括柱形图、折线图、饼图、树形结构图和关系图谱等。通过结合业务特性的模块拆分策略、模块间的交互方式和构建系统等，可以实现灵活的组件组合和扩展，提高开发效率和降低维护成本。一、引言在前端开发中，图表的展示对于数据的可视化具有重要意义。
ECharts常用图表 折线图
热门推荐
黑马程序员官方博客
12-02 1万+
另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~值后，后一个系列的值会在前一个系列的值上。如果在一个图表中有两个或者多个折线图。所以相当于蓝色是在红色这条线的基。折线图更多的使用来呈现数据随时间的。同个类目轴上系列配置相同的。如果每一组数据之间相差较少。那么有可能会出现这种情况。这显然不是我们想要的效果。在没有使用堆叠配置的时候。基于前一个图表进行堆叠。下一篇：ECharts。而是红色这条线对应的点。是一个空空如也的对象。
echarts酷炫图表
06-07
以下是几个酷炫的ECharts图表示例： 1. 折线图：折线图可以用来展示数据随时间变化的趋势，可以帮助用户更好地理解和预测数据的变化趋势。在ECharts中，可以通过设置不同的参数来制作不同样式的折线图。 2. 柱状图...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值