Echarts V5.0版本学习

最新推荐文章于 2023-09-02 10:25:24 发布
置顶 最新推荐文章于 2023-09-02 10:25:24 发布
阅读量1.7k 收藏 2
点赞数 1
分类专栏： 大数据可视化 大数据 文章标签： javascript 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41317414/article/details/113756787
版权

Echarts 年前又上线V5.0版本，赶紧学起来

新旧版本对比：个人感觉新版本Echarts 更加好看 点击图表也加入动画效果 细节满分
相对于旧版本简直一个天上（高大上更炫酷） 一个地下（low货） !

目录

前言

提示：V5.0版本也是刚刚更新博主也是一边看文档一边学习，如果有写得不对的地方请指正

一、echarts是什么？

解释：echarts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

二、使用步骤

1.JS引入

代码如下（示例）：

在这里插入图片描述

2.页面布局

代码如下（示例）：

在这里插入图片描述

3.数据绑定

 var mychart={//通用属性提取，方便接口交互与后期维护；做到数据与视图层相分离。
                color:'#57617B',
                xlist: ['计算器', '笔记本', 'ipad', '华为', '魅族', '小米', '苹果'],
                ylist:[820, 932, 901, 934, 1290, 1330, 1320],
                yname:"价值",
                xname:"类型",
                titlename:"折线图"
};
var option = {
              title:{//图表标题
                   text:mychart.titlename
              },
              grid: {//设置图表位置
                   left: '3%', right: '8%', bottom: '3%', containLabel: true
              },
              xAxis: {
                  type: 'category',
                  boundaryGap:false,
                  name:mychart.xname,//x轴内容
                  axisLine: {
                      lineStyle: {color: mychart.color}
                  },
                  axisLabel: {
                      textStyle: {color:mychart.color}
                  },
                  data: mychart.xlist //X轴数据
              },
              tooltip : {//图表悬浮提示框
                  trigger: 'axis',
                  axisPointer: {
                      type: 'cross',
                      label: {backgroundColor: '#6a7985'}
                    }
             },
             yAxis: {type: 'value',name:mychart.yname  //y轴内容  },
             series: [{
                  data: mychart.ylist, //y轴数据
                  type: 'line',
                  smooth: true
};
var myChart = echarts.init(document.getElementById('main'));//将main初始化到echarts
myChart.setOption(option);//渲染数据

三、项目截图

在这里插入图片描述

四、上才（源）艺（码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts进阶篇</title>
    <style>
        .item{width:1220px;height:100%;margin:0 auto;}
        .box{
            width:600px;
            height:400px;
            position: relative;
            display: inline-block;
        }
        .ms-controller{
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="content ms-controller" ms-controller="Echarts">
        <h1>{{name}}</h1>
        <div class="item">
            <div id="main" class="box"></div>
            <div id="main2" class="box"></div>
            <div id="main3" class="box"></div>
        </div>
    </div>
</body>
<script src="js/jquery-1.11.2.min.js"></script>
<!-- 引入最新版本Echarts V5.0版本 -->
<script src="js/echarts.min5.0.js"></script>
<script src="js/avalon1.47.js"></script>
<script>
    var tempindex=avalon.define({
        $id:"Echarts",
        name:"Echarts进阶篇",
        ctData:[],
        getList:function(){
            tempindex.getMyChart();
            tempindex.getMyChart2();
            tempindex.getMyChart3();
        },
        getMyChart:function(){
            var mychart={//通用属性提取，方便接口交互与后期维护；做到数据与视图层相分离。
                color:'#57617B',
                xlist: ['计算器', '笔记本', 'ipad', '华为', '魅族', '小米', '苹果'],
                ylist:[820, 932, 901, 934, 1290, 1330, 1320],
                yname:"价值",
                xname:"类型",
                titlename:"折线图"
            };
            var option = {
                title:{//图表标题
                    text:mychart.titlename
                },
                grid: {//设置图表位置
                    left: '3%', right: '8%', bottom: '3%', containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap:false,
                    name:mychart.xname,//x轴内容
                    axisLine: {
                        lineStyle: {color: mychart.color}
                    },
                    axisLabel: {
                        textStyle: {color:mychart.color}
                    },
                    data: mychart.xlist
                },
                tooltip : {//图表悬浮提示框
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name:mychart.yname//y轴内容
                },
                series: [{
                    data: mychart.ylist,
                    type: 'line',
                    smooth: true
                }]
            };
            var myChart = echarts.init(document.getElementById('main'));//将main初始化到echarts
            myChart.setOption(option);//渲染数据
        },
        getMyChart2:function(){
            var mychart2={
                color:'#57617B',
                xlist: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                ylist:[10, 52, 200, 334, 390, 330, 220],
                yname:"空气湿度",
                xname:"星期",
                titleName:"柱状图",
                popupName:"直接访问"
            };
            var option2 ={
                title:{text:mychart2.titleName},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        name:mychart2.xname,
                        data: mychart2.xlist,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [{type: 'value',name:mychart2.yname}],
                series: [
                    {
                        name: mychart2.popupName,
                        type: 'bar',
                        barWidth: '60%',
                        data: mychart2.ylist
                    }
                ]
            };
            var myChart2 = echarts.init(document.getElementById('main2'));
            myChart2.setOption(option2);
        },
        getMyChart3:function(){
            var option3 = {
                title:{
                    text:"饼图"
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient:'vertical',
                    top: '10%',
                    left:0
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 1048, name: '搜索引擎'},
                            {value: 735, name: '直接访问'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ]
                    }
                ]
            };
            var myChart3 = echarts.init(document.getElementById('main3'));
            myChart3.setOption(option3);
        }
    });
    avalon.ready(function(){
        tempindex.getList();
    })
</script>
</html>

写在最后

如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏，毕竟原创不易；如果您觉得文章有什么地方写得不对或者需要改进的地方，欢迎通过评论私聊博主！

风泽木
关注
专栏目录
echart图片库_基于html5 Canvas图表库 : ECharts
weixin_39533307的博客
12-19 500
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。—— 大数据时代，重新定义数据图表的时候到了ArchitectureECharts (Enterprise Charts 商业产品...
echarts文档解读
热门推荐
退役复学在校大学生，目光所至，皆为华夏
10-11 2万+
元素作为容器，这样绘制完图表可以直接将 canvas 作为图片应用到其它地方，例如在 WebGL 中作为贴图，这跟使用。如果容器是隐藏的，ECharts 可能会获取不到 DIV 的高宽导致初始化失败，这时候可以明确指定 DIV 的。开始支持SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。可以是 JSON 字符串，也可以是解析得到的对象。解除图表实例的联动，如果只需要移除单个实例，可以将通过将该图表实例。
echarts.min5.0.js
01-28
存放echartsV5.0最新版本JS,方便自己与其他人取用
echarts-5.0.1.zip
02-09
最新echarts 资源包
echarts_5.0.0.zip
12-30
ECharts，一个使用 Js实现的开源可视化库，可流畅运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。下载后得到相关的js文件，以及文件介绍。
echarts5.0新特性
我灰灰凭啥输
03-23 4419
样式属性的变化 去除 default exports 的支持 //echarts5.0之前的引入方式 import echarts from 'echarts' //echarts5.0的引入方式 import * as echarts from 'echarts' 新加了按需引入 import * as echarts from 'echarts/core'; import { BarChart } from 'echarts/charts'; import { GridCom
echarts-5.0.2.rar
03-29
echarts-5.0.2.rar
ECharts JavaScript图表库 v5.0.2-源码.zip
02-26
ECharts 5.0.2是该库的一个版本，它在ECharts 5.0的基础上进行了优化和更新，提供了更多的特性以及更好的性能。 源码分析： 1. **模块化与构建工具**：ECharts 5.0.2的源码很可能采用了模块化设计，如CommonJS或...
Lepus数据库企业监控系统 v5.1.gz
最新发布
03-25
《Lepus数据库企业监控系统 v5.1》是一款专为企业级数据库监控设计的系统，其源代码在压缩包“lepus.5.1.src”中提供，这为开发者、学习者以及毕业设计论文的撰写者提供了宝贵的参考资料。本文将详细解析这款系统的...
echarts柱状图点击高亮
09-02
首先，确保你使用的是echarts的新版本，版本号为5.0及以上。其次，你可以使用Vue结合echarts来实现该功能。你可以参考一篇示例文章，其中提供了一个具有很好参考价值的vue结合Echarts实现点击高亮效果的示例代码。在...
echart5.0附带china.js可以写地图的包
05-25
echart5.0附带china.js可以写地图的包
EChartsJavaScript图表库 v5.0.0
12-07
为您提供EChartsJavaScript图表库下载，ECharts (Enterprise Charts 商业产品图表库)提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。Echarts deviceEcharts explore
echarts5+的离线文档
07-21
echarts5+的离线文档 自己启个服务挂着可直接离线查看
echarts 完全版 js
05-11
echarts 完全版 js
vue从零开始学习
welcome to 一点点 home
09-02 1182
2023-09-02 10:20:37.437 INFO 3392 --- [nio-8080-exec-2] c.m.mall.service.impl.IAdminServiceImpl : 其他情况就是错误没有达到五次和账户没有锁定的情况，这儿是判断密码如果不一致，那就是登录失败。
Echarts饼图5.0（圆弧分段有间隔）
努力的nana
06-08 1006
【代码】Echarts饼图3.0（圆弧分段有间隔）
echarts5.0引入地图，背景渐变色，航线图，地图阴影
Alison_Rose
11-19 9160
echarts5.0引入地图，航线图，背景渐变色，地图阴影
Echarts详细学习5.0版本以上
学如逆水行舟，不进则退，如遇问题联系邮箱：904004593@qq.com
10-17 1478
零基础入门Echarts，包括树状图，折线图，散点图，雷达图等等
echarts-5.0.0
a_letter的博客
12-09 898
echarts-5.0.0 链接：https://pan.baidu.com/s/1-IQlI5eBfBnzYgeYoFfucg 提取码：echo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值