Echarts教程03

ztc_张天赐
231 阅读6分钟

(接Echarts教程02)

Echarts学习(Echarts图表高级)

课程目标

  1. 图表混搭
  2. 自定义主题
  3. 异步数据加载
  4. 事件与行为

图标混搭(可以多图标联动)

  • 【折线图和柱状图的混搭】 指的是在一个图表里面有多种类型的图形在一张图表里面出现，也可以有多个坐标轴 如代码:
var colors = ['#5793f3', '#d14a61', '#675bba'];

option = {
    color: colors,

    tooltip: {
        trigger: 'axis',
        axisPointer: {type: 'cross'}
    },
    grid: {
        right: '20%'
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['蒸发量','降水量','平均温度']
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '蒸发量',
            min: 0,
            max: 250,
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: colors[0]
                }
            },
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '降水量',
            min: 0,
            max: 250,
            position: 'right',
            offset: 80,
            axisLine: {
                lineStyle: {
                    color: colors[1]
                }
            },
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            position: 'left',
            axisLine: {
                lineStyle: {
                    color: colors[2]
                }
            },
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    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]
        },
        {
            name:'降水量',
            type:'bar',
            yAxisIndex: 1,
            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]
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 2,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};

注意：在有两个或多轴数据的时候，我们需要在series里面，你设置的数据里面添加上yAxisIndex:1,是需要添加到那个y轴上，默认的为yAxisIndex:0,

  • 【饼图和柱状堆叠图的混搭】

注意：

  • 在series数组里面每个对象里面会有一个stack:代表的是组合的名称，多组数据堆积图时使用
  • 最后将两个配置项和div节点进行连接起来，会实现两个图的联动效果 echarts.connect([myChart1,myChart2])

详细请看网址高级图表讲解

自定义主题

定义自定义主题的步骤：

  1. 下载主题
  2. 引用主题JS文件
  3. 初始化主题
  • 下载：下载主题可在官网中下载官网
  • 引用：<script src="下载主题的名称(dark.ks)"></script>
  • 简单的初始化主题：(就是直接在初始化主题，在我们的dom节点的时候，添加第二个参数)

var myChart = echarts.init(document.getElementById("main),dark)"

  • 复杂的初始化主题：(就是可以直接点击不同的主题进行相应的主题进行切换，进行切换还需下载jquery文件，进行点击事件)
  1. 我先将我下载好的主题文件进行保存到我的theme文件中
  2. 在我想要用的页面中进行引入,比如我想使用这两者进行切换
引入文件
<head>
    <script src ="js/theme/dark.js"></script>
    <script src ="js/theme/macarons.js"></script>
</head>

声明我的区域空间,并绑定事件
<body>
    <div id ="main" style="width:600px;height:400px;"></div>
    <a href="javascript:void(0)" onclick="changeTheme('dark')">dark</a> |
    <a href="javascript:void(0)" onclick="changeTheme('macarons')">dark</a>
</body>
  1. 进行点击修改，初始化主题
<script>
	function changeTheme(theme){
		myChart.clear()
		myChart = echarts.init(document.getElementById('main'),theme);
		myChart.setOption(option)
	}
</script>

异步数据的加载与更新

基本步骤：

  1. 下载echarts.js文件
  2. 引入echarts.js文件

<script src ="js/echarts.js"> </script>

  1. 准备dom元素

<div id ="main" style ="width:600px;height:400px;"></div> 4. 初始化echarts

var myChart = echarts.init(document.getElementById("main")
  1. 配置echarts配置项

option= {}

  1. 和echarts进行关联

myChart.setOption(option)

异步加载数据的两种方式

方式一：

加载的是本地的数据，也可以加载线上的数据，只需在$.get("配置好地址")
$(function(){
    var myChart = echarts.init(docuemnt.getElementById("main"))
    $.get("data/data.json").done(function(data){
    <!--配置项-->
        myChart.setOption({
            title:{
                text:"异步加载数据"
                
            },
            legend:{
                
            },
            xAxis:{
               //动态的数据 data:data.title//就等同于data:["衣服","零食","游戏"]
                
            },
            yAxis:{
            },
            series:[
                {
                   name:"销量",
                   type:"bar",
                  //动态的数据 data:data.value//就等同于data:[2,34,56]
                }
            ]
        })
    })
})

方式一的特点：

  • 代码简单
  • 线上数据加载，网络问题影响，会造成页面的空白，用户体验差

方式二：

基本步骤同上

事先设置好我的配置项，
myChart.setOption({
    title:{
        text:"异步加载数据"
    },
    <!--图例-->
    legend:{
        data:["销量"]
    },
    xAxis:{
        data:[]
    },
    yAxis:{
        
    },
    series:[
    {
        name:"销量",
        type:"bar",
        data:[]
    }
    ]
})
异步加载数据
 $.get("data/data.json").done(function(data){
         myChart.setOption({
             xAxis:{
             data:data.title//就等同于data:["衣服","零食","游戏"]
             },
             series:[
             {
                 //是根据名字对应到相应的数据
                  name:"销量",
                  //type:在这可写可不写，会和上面的进行合并
                  type:"bar",
                  data:data.value//就等同于data:[2,34,56]
             }
             ]
         })
 })

方法二的特点：

  • 代码冗余，复杂
  • 线上数据加载，网络问题影响，页面会显示空的框架，给用户良好的体验(建议采用方式二)

异步数据加载时的动画请求效果Loading加载

先模拟异步请求数据的加载使用setTimeout定时器

基本步骤同上

<script>
    //获取异步请求的数据
    function fetchData(){
        setTimeout(function(){
            //异步加载数据
            $.get("data/data.json").done(function(data){
                //隐藏我Loading加载的动画
                myChart.hideLoading()
                //进行配置
                myChart.setOption({
                     xAxis:{
                     data:data.title//就等同于data:["衣服","零食","游戏"]
                     },
                     series:[
                     {
                         //是根据名字对应到相应的数据
                          name:"销量",
                          //type:在这可写可不写，会和上面的进行合并
                          type:"bar",
                          data:data.value//就等同于data:[2,34,56]
                     }
                     ]
                            
                })
            })
        },3000)
    }
    $(function(){
        // 我的配置项
            myChart.setOption({
                title:{
                    text:"异步加载数据"
                },
                <!--图例-->
                legend:{
                    data:["销量"]
                },
                xAxis:{
                    data:[]
                },
                yAxis:{
                    
                },
                series:[
                {
                    name:"销量",
                    type:"bar",
                    data:[]
                }
                ]
            })
    })
    //显示我的loading加载的动画
    myChart.showLoading()
    fetchData()
</script>

Loading加载动画的思路：

  • 首先我们可以使用setTimeout进行模拟异步请求数据
  • 在我们初始化echarts后，就会执行我们的myChart.showLoading方法让loaing进行显示
  • 然后经过3秒钟进行异步数据的请求，在请求到了之后将我们的loading进行隐藏，来达到loading加载的效果,提高我们用户的体验效果

数据动态更新

基本步骤同上
使用本地数据进行模拟
核心代码：
<body>
   <div id ="main" style="width:600px;height:400px;"></div>
   <!--我点击的按钮-->
   <div >
       <button onclick ="addData()">数量的变化</button>
   </div>
</body>
<script>
var myChar = echarts.init(document.getElementById("main")
配置项
var datas = [5,20,36,10,20]
var option = {
    title:{
        text:"Echarts数据动态更新"
    },
    tooltip:{
        trigger:"axis",
        axisPoiinter:{
            label:{
                show:true
            }
        },
        //这个代表的是将我的提示可以放到任何的位置
        position:function(point,params,dom,rect,size){
           //固定到顶部
            return [point[0],10%]
        }
       <font color ="blue">
           1. point:"鼠标位置，[20,40]"
           2. params:同formatter的参数相同
           3. dom:tooltip的dom对象
           4. rect:只有鼠标在图形上时有效，是用一个x,y,width,height四个属性表达的图形包围盒
           5. size:包括dom的尺寸和echarts容器的当前尺寸，
       </font>
        
    },
    //工具栏
    toolbox:{
        show:true,
        feature:{
            saveAsImage:{
                show:true
            }
        }
    },
    legend:{
        data:["销量"]
    },
    xAxis:{
        axisPointer:{
            label:{
                show:true
            }
        }
    },
    //系列
    series:[
    {
        name:"销量",
        type:"bar",
        data:datas//这个是我在上面模拟的本地数据
    }
    ]
}
myChart.setOption(option)
function addData(){
   //随机数
    var rand = Math.floor(Math.random()*10)
    console.log(rand)
   //将我本地的数据datas进行循环
    for(var i in datas){
       将我的随机数复值给我的datas相对应的每一项
        datas[i] = datas[i].rand
    }
    console.log(datas)
    //清除一下我的图表
    myChart.clear()
    //将配置项与我们的dom节点相联系起来
    myChart.setOption(option)
}
</script>

Echarts中的事件与行为

Echarts中的事件分为两种类型，

  • 一种是用户鼠标操作点击，或者hover图表的图形时触发的事件
  • 另一种是用户在使用可以交互的组件后触发的行为事件，比如：切换图例开关时触发的"legendselectchanged"事件（这里需要注意切换图例开关是不会触发"legendselectchanged"事件的，）数据区域缩放时触发的"datazoom"事件等等.

Echarts支持的常规的鼠标事件类型包括

  • click：单击
  • dblick:双击
  • mousedown：鼠标按下
  • mousemove:鼠标移出
  • mouseup ：鼠标抬起
  • mouseover:鼠标移入
  • mouseout:鼠标离开

事件使用方法： 所有的鼠标事件都包括params参数 myChart.on("click",function(params){ console.log(params) })

如代码：

基本步骤同上

制定图表的配置项
option = {
 这是图表的侧边栏
    legend:{
        
    },
    xAxis: {
        type: 'category',
        data: ['连衣裙', '运动服', '鞋子', '袜子', '裤子', '衬衫', '褂子']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type类型：为栏，栅栏
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};
将实例化的图标Echarts,设置图标配置项目，同时在Dom中渲染图标显示
myChart.setOption(option)
//进行点击事件
myCChart.on('click',function(params){
    console.log(params)
    //打开浏览器，?wd搜索关键词，encodeURIComponent转码
    window.open("https://www.baidu.com/s?wd = "+encodeURIComponent(params.name))
})

鼠标高级事件的方式：(经典案例)

  1. 如何区分鼠标点击的地方：
  2. 鼠标事件的处理：

4.组件交户的案例：

详细内容请看网址和网址

avatar
文章
阅读
粉丝