vue3 - Echats笔记 基本配置项

vue3 - Echats笔记

一、echarts基本使用

1.1、echarts相关配置（通用）

echarts相关配置

• xAxis：直角坐标系中的X轴
• yAxis：直角坐标系中的Y轴
• series：系列列表。每个系列通过type决定自己的图表类型

//基本格式
let lineEchats = echarts.init(document.getElementById("one"));
      lineEchats.setOption({
        xAxis: {
		//设置类目轴
          type:'category',
          data: xdata,
        },
        yAxis: {
        //数值轴
          type: "value",
        },
        series: {
          data: ydata,
		//类型为折线
          type: "line",
        },
      });

vue的格式

<template>
  <div id="one"></div>
</template>

<script>
//引用echats
import * as echarts from "echarts";
//使用Mounted生命周期
import { onMounted } from "@vue/runtime-core";

export default {
  setup() {
    onMounted(() => {
        //X轴数据
      let xdata = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
          //y轴数据
      let ydata = [150, 230, 224, 218, 135, 147, 260];
        //决定图表在哪个位置呈现
      let lineEchats = echarts.init(document.getElementById("one"));
      lineEchats.setOption({
        xAxis: {
            //类目轴
          type:'category',
          data: xdata,
        },
        yAxis: {
          type: "value",
        },
        series: {
          data: ydata,
          type: "line",
        },
      });
    });
  },
};
</script>

<style>
//必须给div一个固定的高才会显示图片
#one {
  height: 500px;
  border: 1px solid red;
}
</style>

效果展示

1.1.1、标题（title）

只列举常用的几个

• 文字样式
  • textStyle
    • color //文字颜色
    • fontSize //文字大小
• 标题边框
  • borderWidth //边框
  • borderColor //边框颜色
  • borderRadius //圆角设置
• 标题位置
  • left
  • top
  • right
  • bottom

标题这里注意 left 跟 right 不能同时使用，同时使用 left优先级更高。

同理：top 跟 bottom 也不能同时使用，同时使用top 优先级更高。

1. 文字样式

lineEchats.setOption({
    title: {
        //标题名字
      text:'测试',
      textStyle:{
          //文本颜色
         color:'red',
          //字体大小
         fontSize:25
      }
    }，
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

2. 标题边框

lineEchats.setOption({
    title: {
        //标题名字
      text:'测试',
        //边框粗细
 	  borderWidth: 5,
        //边框颜色
      borderColor:'blue',
        //边框圆角
      borderRadius：5
    }，
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

3. 标题位置

lineEchats.setOption({
    title: {
        //标题名字
      text:'测试',
      top:10,
   // left:20,
   // bottom:100
      right:10,
    }，
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

1.1.2、提示框（tooltip）

tooltip：用于配置鼠标滑过或点击图标时的显示框

• 触发类型：trigger

  • item
  • axis

• 触发时机：triggerOn

  • mousemove
  • click

• 格式化：formatter

  • 字符串模板
  • 回调函数

1. 触发类型

lineEchats.setOption({
    title: {}，
    tooltip: {
      trigger: "item",
      // trigger:"axis"
    },
    xAxis: {}，
	yAxis: {},
    series：{}
}）

item效果

axis效果

item和axis区别

item 只能在竖轴图表内显示信息

axis 只要不超过竖轴都可以显示信息

2. 触发时机

lineEchats.setOption({
    title: {}，
    tooltip: {
		triggerOn:'click',
    	//triggerOn:'mousemove',
    },
    xAxis: {}，
	yAxis: {},
    series：{}
}）

click效果

mousemove效果

3. 格式化

字符串模板

lineEchats.setOption({
    title: {}，
    tooltip: {
		formatter:"tides"
    },
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

发现所有的都显示我们设置的值

这里可以使用官网的模板规范我们展示的值

• 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
• 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
• 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
• 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

lineEchats.setOption({
    title: {}，
    tooltip: {
		formatter:'{b}的值是：{c}'
    },
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

回调函数

lineEchats.setOption({
    title: {}，
    tooltip: {
        trigger:"axis",
        triggerOn:'click',
		formatter:function(arg){
            console.log(arg);
        }
    },
    xAxis: {}，
	yAxis: {},
    series：{}
}）

我们看看点击的时候会输出什么

---

我们可以看到arg中包含数值
那我们就可以修改代码自定义输出格式

lineEchats.setOption({
    title: {}，
    tooltip: {
        trigger:"axis",
        triggerOn:'click',
		formatter:function(arg){
 			 return arg[0].name + "我想要的格式是：" + arg[0].value;
        }
    },
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果：

1.1.3、工具按钮（toolbox）

toolbox :Echats提供的工具栏

在使用以下功能之前，我们需要给toolbox添加一个feature节点

• 导出图片

  • saveAsImage

• 数据视图

  • dataView

• 动态类型切换

  • magicType

• 数据区域缩放

  • dataZoo

• 重置

  • restore

1. 导出图片（saveAsImage）

lineEchats.setOption({
    title: {}，
    tooltip: {},
    toolbox: {
       feature:{
  		saveAsImage:{}
       }   
    }
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

2. 数据视图（dataView）

lineEchats.setOption({
    title: {}，
    tooltip: {},
    toolbox: {
       feature:{
  		saveAsImage:{},
   		 //数据视图
    	dataView:{}
       }   
    }
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

我们可以看到 dataView 可以将图表转换成列表形式，可以自定义修改数据。

3. 重置（restore）

lineEchats.setOption({
    title: {}，
    tooltip: {},
    toolbox: {
       feature:{
  		saveAsImage:{},
    	dataView:{}，
        //重置
        restore:{}
       }   
    }
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

4. 数据区域缩放（dataZoom）

lineEchats.setOption({
    title: {}，
    tooltip: {},
    toolbox: {
       feature:{
  		saveAsImage:{},
    	dataView:{}，
        restore:{},
       //数据区域缩放
        dataZoom:{}
       }   
    }
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

选择区域放大数据

5. 动态类型切换（magicType）

lineEchats.setOption({
    title: {}，
    tooltip: {},
    toolbox: {
       feature:{
  		saveAsImage:{},
    	dataView:{}，
        restore:{},
        dataZoom:{}，
        magicType:{
            type:['bar','line']
        }
       }   
    }
    xAxis: {}，
	yAxis: {},
    series：{}
}）

效果

1.1.4、图例（legend）

legend：图例，用于筛选系列，需要和series配合使用

legend中的data是一个数组

legend中的data的值需要和series数组中的某组数据的name值一致

let xdata = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
let ydata1 = [150, 230, 224, 218, 135, 147, 260];
let ydata2 = [10, 20, 24, 18, 13, 14, 20];
lineEchats.setOption({
    title: {}，
    tooltip: {},
    toolbox: {},
    legend:{
        data:['1月总量','2月总量']
    }
    xAxis: {
        xAxis:xdata
    }，
	yAxis: {
        type:'value'
    },
    series：[{
        name: "1月总量",
        type:'bar',
        data:ydata1,
    },{
        name: "2月总量",
        type:'bar',
        data:ydata2,
    }]
}）

效果