一、安装echarts
npm install echarts --save二、在需要的页面引入
import * as echarts from "echarts"三、创建组件
1、模板1：vue2+javascript
<template> <div> <div class="echart_size" :id="id"></div> </div></template><script>import * as echarts from 'echarts'export default { props: { // 接收的参数 id: { type: String, default: '' }, datas: { type: Array, default: () => [] } }, data() { return { // 变量 } }, created() { this.$nextTick(() => { this.barBtn() }) }, methods: { barBtn() { // 实例化对象 let myCharts = echarts.init(document.getElementById(this.id)) // 指定配置项和数据 let option = { // 某图表 } // 把配置项给实例对象 myCharts.setOption(option) // 让图表跟随屏幕自动的去适应 window.addEventListener('resize', function () { myCharts.resize() }) } }}</script><style lang="scss" scoped>.echart_size{ width: 500px; height: 500px;}</style>2、模板2：vue3+javascript
vue3中，有的图表调用不到，初始化echarts时使用 shallowRef
const myCharts = shallowRef()<template> <div class="echart_size" :id="props.id"></div></template><script setup>import { reactive, ref, nextTick, onMounted } from 'vue'import * as echarts from 'echarts'const props = defineProps({ id: { type: String, required: true }, datas:{ type: Array, required: true }})let person=reactive({ // 初始变量})onMounted(()=>{ GetEchar()})const GetEchar = () => { const myCharts = ref() nextTick(() => { myCharts.value = echarts.init(document.getElementById(props.id)) let option = { // 某图表 }; myCharts.value.setOption(option) // 让图表跟随屏幕自动的去适应 window.addEventListener('resize', function () { myCharts.value.resize() }) })}</script><style lang="scss" scoped>.echart_size { width: 100%; height: 100%;}</style>3、模板3：vue3+typescript
<template> <div class="echart_size" :id="props.id"></div></template><script lang="ts" setup>import { reactive, ref, nextTick, onMounted } from 'vue'import * as echarts from 'echarts'let person: any = reactive({ // 初始变量})type Props = { id: string}const props = withDefaults(defineProps<Props>(), {})onMounted(()=>{ GetEchar()})const GetEchar = () => { const myChart = ref<HTMLElement>() const myCharts = ref<any>() nextTick(() => { const chartDom = document.getElementById(props.id)! myCharts.value = echarts.init(chartDom) let option = { }; myCharts.value.setOption(option) // 让图表跟随屏幕自动的去适应 window.addEventListener('resize', function () { myCharts.value.resize() }) })}</script><style lang="scss" scoped>.echart_size { width: 500px; height: 500px;}</style>四、页面调用
1、vue2
<template> <div> <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" /> </div></template><script> import EchartModule from '@/components/echartModule' export default { components: {EchartModule}, data(){ return{ data: [ { value: 0, label: '测试1' }, { value: 1, label: '测试2' } ] } } }</script>2、vue3+js
<template> <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" /></template><script setup>import { reactive } from 'vue'import EchartModule from '@/components/echartModule'let person=reactive({ data:[ { value: 0, label: '测试1' }, { value: 1, label: '测试2' } ]})</script>3、vue3+ts
// vue3+ts<template> <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" /></template><script lang="ts" setup>import { reactive } from 'vue'import EchartModule from '@/components/echartModule'let person:any=reactive({ data:[ { value: 0, label: '测试1' }, { value: 1, label: '测试2' } ]})</script>五、Echarts 常用的相关事件
1、鼠标单击/左键事件
//vue2myCharts.on('click', function(e) {})// vue3myCharts.value.on('click', function(e) {})2、鼠标移入/进入事件
//vue2myCharts.on('mouseover', function(e) {})// vue3myCharts.value.on('mouseover', function(e) {})3、鼠标移出/离开事件
//vue2myCharts.on('mouseout', function(e) {})// vue3myCharts.value.on('mouseout', function(e) {})4、让图表跟随屏幕去自适应
window.addEventListener('resize', function () { // vue2 myCharts.resize() // vue3 myCharts.value.resize()})5、轮播动画效果
需要配置tooltip参数使用，显示tooltip提示框的轮播动画
// vue2myChart.currentIndex = -1;setInterval(function () { var dataLen = option.series[0].data.length; // 取消之前高亮的图形 myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: myChart.currentIndex }); myChart.currentIndex = (myChart.currentIndex + 1) % dataLen; // 高亮当前图形 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: myChart.currentIndex }); // 显示 tooltip myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: myChart.currentIndex });}, 2000);6、dispatchAction 行为事件
具体用法参考 echarts 下的 action：https://echarts.apache.org/zh/api.html#action
（1）highlight：高亮指定的数据图形
myCharts.currentIndex = -1myCharts.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: myCharts.currentIndex});（2）downplay：取消高亮指定的数据图形
（3）select：选中指定的数据
（4）unselect：取消选中指定的数据
（5）toggleSelect：切换选中状态
（6）tooltip - showTip：显示提示框
（7）tooltip - hideTip：隐藏提示框
（8）dataZoom - dataZoom：数据区域缩放
（9）geo - geoSelect：选中指定的地图区域
（10）geo - geoUnSelect：取消选中指定的地图区域
（11）geo - geoToggleSelect：切换指定的地图区域选中状态
六、Echarts 常用的相关配置
1、tooltip 提示框
（1）tooltip的公共属性配置
tooltip: { position:'right', padding: [5,8], textStyle:{ color: '#eee', fontSize: 13 }, backgroundColor: "rgba(13,5,30,.5)", extraCssText:'z-index:1', // 层级 axisPointer: {}}（2）trigger 类型为 item
tooltip: { trigger: 'item', formatter: function(param) { let resultTooltip = "<div style='border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" + "<div>" + param.name + "</div>" + "<div style='padding-top:5px; font-size:10px;color:#999;'>" + "<span style='display: inline-block; width: 10px; height:10px; border-radius: 50%;background-color: " + param.color + ";'></span>" + "<span style=''> " + param.seriesName + "：</span>" + "<span style='font-size:16px;color:" + param.color + "'>" + param.value + "</span></span>" + "</div>"; return resultTooltip }}（3）trigger 类型为 axis
tooltip: { trigger: 'axis', formatter: function(param) { let resultTooltip = "<div style='border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" + "<div>" + param[0].name + "</div>" + "<div style='padding-top:5px; font-size:10px;color:#999;'>" + "<span style='display: inline-block; width: 10px; height:10px; border-radius: 50%;background: " + param[0].color + ";'></span>" + "<span style=''> " + param[0].seriesName + "：</span>" + "<span style='font-size:16px;color:" + param[0].color + "'>" + param[0].value + "</span></span>" + "</div>"; return resultTooltip }}2、axisPointer 坐标指示器
（1）type 类型为 shadow
axisPointer: { type: 'shadow', label: { show: true, backgroundColor: 'transparent' }, shadowStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'rgba(100, 101, 171, 0)' }, { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' }, { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' }, { offset: 1, color: 'rgba(100, 101, 171, 1)' }, ], global: false } }}（2）type 类型为 line
axisPointer: { type: 'line', label: { show: true, backgroundColor: 'transparent' }, lineStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'rgba(100, 101, 171, 0)' }, { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' }, { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' }, { offset: 1, color: 'rgba(100, 101, 171, 1)' } ], global: false }, type: 'solid', width: 10 }}3、渐变处理
（1）线性渐变区域 LinearGradient
// 前四个分参数分别代表右，下，左，上，数值0-1color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'blue' }, { offset: 1, color: 'red' }])（2）径向渐变区域 RadialGradient
// 前三个分参数分别代表圆心（x,y），半径（数值0-1）color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [ { offset: 0, color: 'blue' }, { offset: 1, color: 'red' }])（3）线性渐变区域 colorStops-linear
// x,y,x2,y2数值同LinearGradient前四个参数分别代表右，下，左，上，数值0-1color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'blue' }, { offset: 1, color: 'red' } ], global: false // 缺省为 false}（4）径向渐变区域 colorStops-radial
// x 0.5 y 0.5 代表圆心，r 代表半径color: { type: 'radial', x: 0.5, y: 0.5, r: 0.9, colorStops: [ { offset: 0, color: 'blue' }, { offset: 1, color: 'red' } ], global: false // 缺省为 false}（5）纹理填充 color-image
let url= "../../static/bg_icon.png"color: { image: url, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串 repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'}4、label中文字通过rich自定义样式设置
label: { show: true, formatter: `/n{d|{d}} {unit|${props.unit}}`, rich: { d: { fontSize: 26, fontWeight: 600, color: "#000" }, unit: { fontSize: 20, fontWeight: 600, color: "#3C3B3B" } }, color: "#000"}希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~
