Echarts V5.0版本学习

最新推荐文章于 2022-11-19 23:25:48 发布

置顶风泽木

最新推荐文章于 2022-11-19 23:25:48 发布

阅读量1.7k

点赞数 1

分类专栏：大数据可视化大数据文章标签： javascript 大数据

本文链接：https://blog.csdn.net/qq_41317414/article/details/113756787

版权

大数据可视化同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

大数据

2 篇文章 0 订阅

订阅专栏

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>

写在最后

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

风泽木

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Echarts V5.0版本学习

Echarts 年前又上线V5.0版本，赶紧学起来新旧版本对比：个人感觉新版本Echarts 更加好看点击图表也加入动画效果细节满分相对于旧版本简直一个高大上更炫酷，一个low货 !目录Echarts 年前又上线V5.0版本，赶紧学起来前言一、echarts是什么？二、使用步骤1.JS引入2.图表布局3.数据绑定项目截图上才（源）艺（码）写在最后前言提示：V5.0版本也是刚刚更新博主也是一边看文档一边学习，如果有说的不对的地方请指正一、echarts是什么？解释：echarts
复制链接

扫一扫

专栏目录