主题设置
- 默认主题
- - 重点
  - 示例
- 自定义主题
调色盘
- 主题
- 全局
- 局部
- 颜色渐变
可视化图表自适应
- 重点
- 示例
实现简单的加载动画
- 重点
- 示例
增量动画实现
- 重点
- 示例
简单动画配置项
关于全局echarts对象和echartsInstance对象
- echarts.connect()
- 其他echarts实例对象方法

本博客内容参考黑马课程，详细信息请参考以下网址

Bilibili官方黑马课程：【echarts数据可视化项目】

主题设置

默认主题

重点

//通过echarts.init方法设置light、dark两种默认主题
echarts.init(document.getElementById("canvas_area"),"dark")

示例

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.js"></script>
    <title>柱状图</title>
  </head>
  <body>
    <div style="width: 600px; height: 400px" id="canvas_area"></div>
  </body>
  <script>
    var myChart = echarts.init(document.getElementById("canvas_area"), "dark"); //暗色主题
    // var myChart = echarts.init(document.getElementById("canvas_area"), "light");//亮色主题
    var option = {
      title: {
        text: "期末考试成绩",
        link: "https://www.baidu.com",
        textStyle: {
          color: "gray",
          fontStyle: "normal",
        },
      },
      xAxis: {
        // x轴
        type: "category", //类目轴
        data: ["张三", "李四", "王五"],
      },
      tooltip: {},
      yAxis: {
        //y轴
        //数值轴
        type: "value",
      },
      series: [
        //系列列表
        {
          name: "语文",
          type: "bar",
          data: [40, 50, 60],
        },
      ],

      // myChart.setOption(option);
    };
    myChart.setOption(option);
  </script>
</html>

效果

在这里插入图片描述

自定义主题

步骤

在【echarts自定义主题】编辑器中编辑主题

下载js文件
引入js文件
在init中引入

调色盘

一组颜色，图形、主题等都会自动从中选择颜色

主题

自定义主题时，其中的调色盘

全局

配置在Option配置项中

var option={
  color:['red','green',...]
  ...
}

局部

设置在series配置项中

 var option={
 	series:[{
 		type:'bar',
 		color:['red','green',...],
 		...
 	}]
 }

颜色渐变

线性渐变

itemStyle:{
	color:{
		type:'linear',
		x:0,
		y:0,
		x2:0,
		y2:1,
		colorStops:[{
			offset:0,
			color:'gray'
		},{
			offset:1,
			color:'green'
		}],
	}
}

效果
在这里插入图片描述

径向渐变

itemStyle:{
	color:{
		type:'radial',
		x:0.5,
		y:0.5,
		r:0.5,
		colorStops:[{
			offset:0,
			color:'gray'
		},{
			offset:1,
			color:'green'
		}]
	}
}

效果
在这里插入图片描述

可视化图表自适应

重点

//写法一：监听窗口变化事件并调用echarts中的resize()函数
// window.onresize = function () {
//   myChart.resize();
// };
//写法二
window.onresize = myChart.resize;

示例

<script>
  var myChart = echarts.init(document.getElementById("canvas_area"));
  var option = {
    title: {
      text: "期末考试成绩",
      link: "https://www.baidu.com",
      textStyle: {
        color: "gray",
        fontStyle: "normal",
      },
    },
    xAxis: {
      // x轴
      type: "category", //类目轴
      data: ["张三", "李四", "王五"],
    },
    yAxis: {
      //y轴
      //数值轴
      type: "value",
    },
    series: [
      //系列列表
      {
        name: "语文",
        type: "bar",
        data: [40, 50, 60],
      },
    ],
  };
  myChart.setOption(option);
  //图表随着浏览器窗口大小自适应变化，写法一
  // window.onresize = function () {
  //   myChart.resize();
  // };
  //写法二
  window.onresize = myChart.resize;
</script>

效果
在这里插入图片描述

实现简单的加载动画

重点

// myChart.showLoading();两者在合适的时机进行显示和隐藏
// myChart.hideLoading();

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地图实现</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.js"></script>
  </head>
  <body>
    <div id="canvas" style="width: 600px; height: 400px"></div>
  </body>
  <script>
    // series下新增一个对象
    // 准备数据散点，配置给series下的另一个对象
    var scatter_data = [
      {
        value: [117, 31],
      },
    ];
    // 配置series下的新对象type值为effectScatter
    // 指明散点图的坐标系统为geo
    // 调整涟漪动画
    var myChart = echarts.init(document.getElementById("canvas"));
    var url = "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json";
    myChart.showLoading();//ajax请求前显示加载动画
    $.get(url, function (resp) {
      myChart.hideLoading();//数据请求成功后隐藏加载动画
      //使用ajax获取矢量地图数据
      console.log(resp);
      //生成随机数据
      let eachdata = new Array();
      for (i = 0; i < resp["features"].length; i++) {
        name = resp["features"][i]["properties"].name;
        // console.log(name);
        value = Math.round(Math.random() * 100);
        eachdata.push({ name: name, value: value });
        // console.log(eachdata);
      }
      echarts.registerMap("chinamap", resp); //在ajax函数中注册地图矢量数据
      var option = {
        //配置数据
        series: [
          {
            data: eachdata,
            geoIndex: 0, //将数据与第0个geo配置关联在一起
            type: "map",
          },
          {
            data: scatter_data,
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              scale: 10,
            },
          },
        ],
        //地图显示关键点
        visualMap: {
          min: 0,
          max: 110,
          inRange: {
            color: ["white", "red"], //设置颜色渐变效果
          },
          calculable: true, //出现滑块
        },
        //配置geo的type为map
        geo: {
          type: "map",
          map: "chinamap",
          roam: true, //设置缩放以及拖动效果
          label: {
            show: false, //展示标签
          },
        },
      };
      myChart.setOption(option);
    });
  </script>
</html>

效果
在这里插入图片描述

增量动画实现

重点

//在数据更新之后，生成新的Option，然后使用echarts的setOption进行数据更新
//注意，新生成的option与原option是合并关系而并非覆盖关系
$("#add-data").click(function () {
  name_list.push("小张");
  data_list.push(90);
  var option = {
    xAxis: {
      data: name_list,
    },
    series: [
      {
        data: data_list,
      },
    ],
  };
  myChart.setOption(option);
});

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.js"></script>
    <title>柱状图之增量动画</title>
  </head>
  <body>
    <div style="width: 600px; height: 400px" id="canvas_area"></div>
    <!-- <div id="canvas_area" style="height: 400px"></div> -->
    <button id="change-data">改变数据</button>
    <button id="add-data">增加数据</button>
  </body>
  <script>
    var myChart = echarts.init(document.getElementById("canvas_area"));
    var name_list = ["张三", "李四", "王五"];
    var data_list = [40, 50, 60];
    var option = {
      title: {
        text: "期末考试成绩",
        link: "https://www.baidu.com",
        textStyle: {
          color: "gray",
          fontStyle: "normal",
        },
      },
      xAxis: {
        // x轴
        type: "category", //类目轴
        data: name_list,
      },
      yAxis: {
        //y轴
        //数值轴
        type: "value",
      },
      series: [
        //系列列表
        {
          name: "语文",
          type: "bar",
          data: data_list,
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值",
              },
              {
                type: "min",
                name: "最小值",
              },
            ],
          },
          markLine: {
            data: [
              {
                type: "average",
                name: "平均值",
              },
            ],
          },
          label: {
            show: true,
            position: "inside",
          },
        },
      ],
    };
    myChart.setOption(option);
    $("#add-data").click(function () {
      name_list.push("小张");
      data_list.push(90);
      var option = {
        xAxis: {
          data: name_list,
        },
        series: [
          {
            data: data_list,
          },
        ],
      };
      myChart.setOption(option);
    });
    $("#change-data").click(function () {
      data_list = [40, 50, 90];
      var option = {
        series: [
          {
            data: data_list,
          },
        ],
      };
      myChart.setOption(option);
    });
  </script>
</html>

效果
在这里插入图片描述

简单动画配置项

var option={
	animation:true;//动画是否开启
	//animationDuration:2000,//动画时长，单位：毫秒
	animationDuration:function(arg){
		return 2000*arg;
	},
	animationEasing:'linear',//动画变化是否均匀 bounceOut回弹效果
	...
}

关于全局echarts对象和echartsInstance对象

var myChart = echarts.init(document.getElementById("canvas_area"));

全局echarts对象就是通过引入js文件后可直接使用的对象，如上面的echarts
echartsInstance对象就是调用echarts.init()方法返回的对象，如上面的变量myChart

echarts.connect()

将多个图表进行拼接

echarts.connect([myChart1,myChart2]);

其他echarts实例对象方法

on/off绑定和解绑事件处理函数

myChart.on('click',function(arg){
	console.log(111);
	console.log(arg);
})

dispatchAction 触发某些行为

myCharts.dispatchAction({
	type:'highlight',//事件类型
	seriesIndex:0,//图表索引
	dataIndex:1//高亮位置
})

echarts数据可视化项目搭建（二）

目录

主题设置

默认主题

重点

示例

自定义主题

调色盘

主题

全局

局部

颜色渐变

可视化图表自适应

重点

示例

实现简单的加载动画

重点

示例

增量动画实现

重点

示例

简单动画配置项

关于全局echarts对象和echartsInstance对象

echarts.connect()

其他echarts实例对象方法

相关文章