echarts 部分功能记录

全部效果 参考 官网 或者 直接搜索

1 安装

npm i echarts

2 使用

import * as echarts from 'echarts'

// 准备一个 容器  必须要  有 宽高

<div ref="bar" style="height: 330px"></div>

const bar = ref('')
echarts.init(bar.value).setOption(echartsParameter)

渲染器
大部分场景选择  SVG
大量交互 大量图标 少部分场景  canvas

echarts.init(bar.value,'light',{renderer:'svg'})

const echartsParameter = {

    // 标题
    title: {
    text: "Main Title",
    subtext: "Sub Title",
    link = '超链接  跳转  URL',
    target = 'blank',// self 当前窗口打开   blank 新窗口打开
    left: "center",
    top: "center",
    borderColor:'pink',
    borderWidth:5,
    textStyle: {
      fontSize: 30,
      color:'red'
    },
    subtextStyle: {
      fontSize: 20
    }
  }

  // 提示框
  	tooltip: {
		trigger: 'axis', // axis坐标轴触发 该坐标轴区域   item 限制在图形上
		extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 附加阴影样式
		confine: true, // 限制 tooltip在容器内
		axisPointer: {
			type: 'shadow', // hover 区域阴影显示样式  line-实线 shadow-阴影 cross-十字准星
		},
		// backgroundColor: '#fff',
		// borderColor: 'none',
		textStyle: {
			color: '#53565C',
		},
    showContent:false, // 不显示 提示框
    // 自定义提示框信息--数据  params 为 series--{ data:[] }
    formatter(params){
      return `字符串拼接出想要的数据 价格是${params[0].XXX}`
    }
	},

  // 图例组件   下方导航提示作用
    legend: {
      top: 'bottom' // 顶部 位置
      show:true, // 点击 图表是否显示
      icon:'circle' // 图标形状
      orient:'vertical'// 布局方向
    },

  // grid   图表 距离 容器的 位置
		grid: {
		show:true, // 图表外层边框
		backgroundColor:"red",// 图表填充色
		borderColor:"pink", // 边框颜色
		top: '3%',
		left: '3%',
		bottom: '3%',
		right: '3%',
		containLabel: true, // 坐标轴是否跟随一起偏移
	},

  // 柱状图   bar   markPoint 标记 最大值  最小值  markLine平局值
  // 水平柱状图   柱子 可以改样式 圆角 渐变色 分别设置颜色 series--[ itemStyle--normal ]

  // 饼状图   pie
  // radius 圆心空白距离  大饼的半径   center圆心的坐标  X Y
  // label 提示文字 位置 颜色  outside  inside  center
  // roseType 玫瑰 状

  // 折线图  line
  // markPoint 标记 最大值  最小值  markLine平局值
  // stack: 'Total' 堆叠  重合摆放 不然并列   smooth: true 曲线
  // 堆叠区域  areaStyle
  // 聚焦当前区域高亮  emphasis:{focus:"series"}

  // 散点图  scatter
	  series--{ data[[x,y],[x,y],[x,y]] 一个点 一个点}
		symbolSize:20 点的大小
		颜色渐变
		color:{
      type:"linear",// 线性渐变     只 x 轴 0-1
      // x x2   x轴 渐变起始与终结 点
			// y y2   y轴 渐变起始与终结 点
			x:0,
			y:0,
			x2:1,
			y2:0,
			// 颜色  对照 x x2
      colorStops:[
        {offset:0,color:red}
				{offset:1,color:pink}
			]
		}
    选中当前 散点 高亮  emphasis:{itemStyle}

	// K线图  candlestick 股票
     series--{ data[[1,2,3,4],[1,2,3,4]] 水平线 上下边界 大小决定 红绿   直线 上下边界  }
     series--itemStyle:{
       color:"red" // 上涨颜色
			 color0:"dark" // 下跌颜色
			 borderColor:"pink", // 上涨边框颜色   竖线
			 borderColor0:"pink", // 下跌边框颜色  竖线
		 }
     markPoint  标记 最大值  最小值   valueDim 在上方还是下方 设置标记
		 markLine平局值

	// 雷达图  radar
	  radar:[{
     // 雷达图特有的
     indicator:[]
		 radius:200    // 半径
		 shape:"circle"   圆形雷达  默认多边形
		//  旋转  坐标系的起始角度
     StartAngel:180
    // 圆盘分割层级
    splitNumber:10
    // 显示名字
		axisName:{
			formatter:"{value}",
			color:"red"
		}
		// 分割区域样式
		splitArea:{
			areaStyle:{}
		}
		}]

  // 漏斗图  funnel
    series--[ data[{ value,name }] ]
		由大到小   由小到大
		sort  默认递减   ascending 递增   none 根据数据顺序排序
    series--itemStyle:{}
    label 提示文字 位置 颜色  outside  inside  center
    emphasis:{   // 选中后高亮显示
			fontSize:30
		}

	// 仪表盘  gauge  速度 效率
    series--[ data[{ value,name }] ]
    detail:{
      calueAnimation:true  // 启动动画
		}
		progress:{
			show:true, // 外圈进度条 显色
		}

	// 关系图  graph
	  layout:"force" // 引导布局
    itemStyle:{ color }
		label:{ // 图形上文字
			position:"bottom"// 文字位置
      distance:6 // 距离图片距离
			fontSize:16
      align:"center" // 居中
		}
		// 图形 间距
		force:{
    repulsion:100 // 点与点  间距
    qravity:0.01距离中心点位置
    edgeLength:两边点距离
		}
  //  关系  关联
	series--[ data[{ id,name ,symbolSize--图形大小 }] ]
  links:[{
		source:"1" // 边的节点   主元素 id
		target:"2" // 目标节点   跟随关系元素 id
		relation:{ // 关系
			name:"老婆"，// 类别
      id:"1" // 数据
		}
	 }]
  edgeLabel:{ // 连线
    position:"middle",
		formatter:params=>params.data.relation.name //连线上显示 名字
	}

 // 数据区域 缩放   dataZoom  x y 轴数据的 缩放
   series--[ dataZoom:{
     type:"slider"
     xAxisIndex:0
		 filterMode:"none" // 不对数据进行过滤
	 },{
		 type:"slider"
     yAxisIndex:0
		 filterMode:"none" // 不对数据进行过滤
	 }

 // 树形图  tree
    最外层  数据  是  根节点
		emphasis:{   // 选中后高亮显示
		orient:"LR"   布局方向
		label:{ rotate:90 }  文字旋转90度  竖直排列

 // 数据排序  dataset
   dataset:[{
		// 数据的分类   可以理解为  x y  轴数据 标签
    dimensions:["分类","数量"]// 一般 就指 x y 轴 分类 标签
	  // 分类数据     可以理解为  x y 轴 分类 数据
		// xAxis--type: 'category' data: [美食,数码,蔬菜,海鲜]
		//  series data:[ 1 ,2,3,4]
		source:[["美食",1],["数码",2],["蔬菜",3],["海鲜",4]]
		{
			transform:{// 排序方式
        type:"sort"
				config:{dimension:"数量",order:desc}// 基于什么排序  数量  排序规则
			}
		}
	 }]
   xAxis--type: 'category', // 类目轴   无需 data
   yAxis
   series 映射 dataset--source  无需 data
	 encode:{
		x:"分类", //映射 x轴数据
		y:"数量"  //映射 y轴数据
	 }
	 datasetIndex:1 // 取 dataset  第一条 数据


 // 主题  内置主题
   默认(不传参)  light  dark
   const bar = ref('')
	 // init  第二个参数 修改 内置主题
   echarts.init(bar.value,"light").setOption(echartsParameter)


 // 主题  自定义主题
   1 下载主题
	 官网--下载--主题下载--定制主题--选择好方案--下载主题--选择Json版本--复制数据
	 2 导入到项目中
   assets目录下新建 echarts文件夹 -- 创建 theme.js
   3 导出数据
	 export const customize = 复制的Json数据
	 4 使用 主题
   import { customize } from '@/assets/echarts/theme'

   const bar = ref('')
	 // init  第二个参数 修改 自定义主题
   echarts.init(bar.value,"customize").setOption(echartsParameter)


 // 中国地图  map

  1 准备地图数据
	登陆 阿里云数据可视化平台 -- http://datav.aliyun.com/portal/school/atlas/area_selector
  中国--JSON API--复制该 API -- 网页打开 -- 复制数据
	2 导入到项目中
	assets目录下新建 echarts文件夹 -- 创建 chinaMap.js
	3 导出数据
  export const chinaMapData = 复制的Json数据
  4 使用 数据
  import { chinaMapData } from '@/assets/echarts/chinaMap'
	5 配置地图
	const map = ref('')

		const option = {
		geo:{ // 地理坐标组件
      type:"map",
			map:"chinaMap" // 自定义的名字
			roam:true // 平移缩放
			zoom:2,// 缩放比例
			center:[经度，纬度] // 初始化 中心点
		}
	}
	//                                   自定义名字  地图数据
	echarts.init(map.value).registerMap("chinaMap",chinaMapData).setOption(option)

	// 视觉映射效果  控制条
	visualMap: {
		type: 'continuous', // 连续的
		nim: 1000,
		max: 5000,
		calculable: true, // 滑动效果开启
		inRange: {
			color: ['#50a3ba', '#eac736', '#d94e5d'], // 颜色设置
		},
		textStyle: {
			color: '#fff', // 指示器 文本颜色
		},
	},

 // 省份地图
 同上  获取 省份 数据
 geo:{
	label:{
		show:true, // 显示 市 名称
		color:"red",
		fontSize: 30
	},
	itemStyle:{
		areaColor: "pink" // 地图颜色
 }


//  地图标记  即  散点图  以 地图 为 参考定位

 series:[{
	type:"scatter"// 散点图
	data:[{
    name:"北京市"// 数据名字
		value:[116.46,39.92,4000]// 经度 纬度 携带数据
	}],
	coordinatesSystem:"geo"// 以地图为参考定位
	symbolSize:20 // 点的大小
	label:{show:true} // 显示 值
 },

 {
	type:"effectScatter"// 涟漪 效果的 散点图
	data:[{
    name:"北京市"// 数据名字
		value:[116.46,39.92,4000]// 经度 纬度 携带数据
	}],
	coordinatesSystem:"geo"// 以地图为参考定位
	// 涟漪效果的 配置
	rippleEffect:{
		number:2 // 波纹数量
		scale:4 // 波纹大小
	},
	itemStyle:{
		color: "red" // 红色散点
 }
 }
]


// 窗口自适应 大小  echarts.resize()
echarts.init(line.value).setOption(option)
// 监听 页面 大小 改变
window.addEventListener("resize",()=>{
	echarts.resize()
})

// 容器自适应 大小  -- div
1 安装 插件  监听 容器 大小改变
npm install element-resize-detector
2 引入
import elementResizeDetectorMaker from 'element-resize-detector'
3 绑定dom元素（需要监听的 div)
const erd = elementResizeDetectorMaker()
// dom 需要实例化之后才可以
onMounted(() => {
	erd.listenTo(bar.value, () => {
	  myEcharts.resize()
	})
})

// echarts 加载  loading 占位
方式 1 开启 loading  数据请求完毕  await 之后  关闭 loading

echarts.showLoading()
apiLaunch("Url").then(v=>{
	console.log(v)
	echarts.hideLoading()
	echarts.init(line.value).setOption(option)
})


// 初始化 动画效果 配置    animation
animation:false  // 关闭动画
animationThreshold:4 // 柱状图 为例子  个数 >= 4 才有动画
animationDuration:3000 // 动画时长
animationDelay:1 // 延时发生动画
animationEasing:"linear" // 动画效果

// echarts 事件  on
点击事件 click
echarts.on("click",params=>{ } ) // 全部添加点击事件
echarts.on("click","series.line",params=>{ } ) // 指定 类型的图表 添加点击事件
echarts.on("click",{name:"分类名",seriesIndex:1},params=>{ } ) // 哪个分类 哪个图表 添加点击事件
}

3 酷炫的 模版

组件库 -- dataV
http://datav.jiaminghi.com/

1 安装
npm install @jiaminghi/data-view
2 使用
main.js中
// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

// 按需引入
import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

组件中--
import { borderBox1 } from '@jiaminghi/data-view'

components:{ borderBox1 }

重点   vue3 不支持 dataV  导入 后报错  需要修改 源码  即可