封装一个公用的【Echarts图表组件】的3种模板

一、安装echarts

npm install echarts --save

二、在需要的页面引入

import * as echarts from "echarts"

三、创建组件

1、模板1：vue2+javascript

1. <template>
2. <div>
3. <div class="echart_size" :id="id"></div>
4. </div>
5. </template>
6. <script>
7. import * as echarts from 'echarts'
8. export default {
9. props: {
10. // 接收的参数
11. id: {
12. type: String,
13. default: ''
14. },
15. datas: {
16. type: Array,
17. default: () => []
18. }
19. },
20. data() {
21. return {
22. // 变量
23. }
24. },
25. created() {
26. this.$nextTick(() => {
27. this.barBtn()
28. })
29. },
30. methods: {
31. barBtn() {
32. // 实例化对象
33. let myCharts = echarts.init(document.getElementById(this.id))
34. // 指定配置项和数据
35. let option = {
36. // 某图表
37. }
38. // 把配置项给实例对象
39. myCharts.setOption(option)
40. // 让图表跟随屏幕自动的去适应
41. window.addEventListener('resize', function () {
42. myCharts.resize()
43. })
44. }
45. }
46. }
47. </script>
48. <style lang="scss" scoped>
49. .echart_size{
50. width: 500px;
51. height: 500px;
52. }
53. </style>

2、模板2：vue3+javascript

vue3中，有的图表调用不到，初始化echarts时使用 shallowRef

const myCharts = shallowRef()

1. <template>
2. <div class="echart_size" :id="props.id"></div>
3. </template>
5. <script setup>
6. import { reactive, ref, nextTick, onMounted } from 'vue'
7. import * as echarts from 'echarts'
8. const props = defineProps({
9. id: {
10. type: String,
11. required: true
12. },
13. datas:{
14. type: Array,
15. required: true
16. }
17. })
19. let person=reactive({
20. // 初始变量
21. })
23. onMounted(()=>{
24. GetEchar()
25. })
27. const GetEchar = () => {
28. const myCharts = ref()
29. nextTick(() => {
30. myCharts.value = echarts.init(document.getElementById(props.id))
31. let option = {
32. // 某图表
33. };
34. myCharts.value.setOption(option)
35. // 让图表跟随屏幕自动的去适应
36. window.addEventListener('resize', function () {
37. myCharts.value.resize()
38. })
39. })
40. }
42. </script>
44. <style lang="scss" scoped>
45. .echart_size {
46. width: 100%;
47. height: 100%;
48. }
49. </style>

3、模板3：vue3+typescript

1. <template>
2. <div class="echart_size" :id="props.id"></div>
3. </template>
5. <script lang="ts" setup>
6. import { reactive, ref, nextTick, onMounted } from 'vue'
7. import * as echarts from 'echarts'
8. let person: any = reactive({
9. // 初始变量
10. })
11. type Props = {
12. id: string
13. }
14. const props = withDefaults(defineProps<Props>(), {})
16. onMounted(()=>{
17. GetEchar()
18. })
19. const GetEchar = () => {
20. const myChart = ref<HTMLElement>()
21. const myCharts = ref<any>()
22. nextTick(() => {
23. const chartDom = document.getElementById(props.id)!
24. myCharts.value = echarts.init(chartDom)
25. let option = {
27. };
28. myCharts.value.setOption(option)
29. // 让图表跟随屏幕自动的去适应
30. window.addEventListener('resize', function () {
31. myCharts.value.resize()
32. })
33. })
34. }
36. </script>
38. <style lang="scss" scoped>
39. .echart_size {
40. width: 500px;
41. height: 500px;
42. }
43. </style>

四、页面调用

1、vue2

1. <template>
2. <div>
3. <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
4. </div>
5. </template>
7. <script>
8. import EchartModule from '@/components/echartModule'
9. export default {
10. components: {EchartModule},
11. data(){
12. return{
13. data: [
14. { value: 0, label: '测试1' },
15. { value: 1, label: '测试2' }
16. ]
17. }
18. }
19. }
20. </script>

2、vue3+js

1. <template>
2. <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
3. </template>
5. <script setup>
6. import { reactive } from 'vue'
7. import EchartModule from '@/components/echartModule'
8. let person=reactive({
9. data:[
10. { value: 0, label: '测试1' },
11. { value: 1, label: '测试2' }
12. ]
13. })
14. </script>

3、vue3+ts

1. // vue3+ts
2. <template>
3. <EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
4. </template>
6. <script lang="ts" setup>
7. import { reactive } from 'vue'
8. import EchartModule from '@/components/echartModule'
9. let person:any=reactive({
10. data:[
11. { value: 0, label: '测试1' },
12. { value: 1, label: '测试2' }
13. ]
14. })
15. </script>

五、Echarts 常用的相关事件

1、鼠标单击/左键事件

1. //vue2
2. myCharts.on('click', function(e) {})
4. // vue3
5. myCharts.value.on('click', function(e) {})

2、鼠标移入/进入事件

1. //vue2
2. myCharts.on('mouseover', function(e) {})
4. // vue3
5. myCharts.value.on('mouseover', function(e) {})

3、鼠标移出/离开事件

1. //vue2
2. myCharts.on('mouseout', function(e) {})
4. // vue3
5. myCharts.value.on('mouseout', function(e) {})

4、让图表跟随屏幕去自适应

1. window.addEventListener('resize', function () {
2. // vue2
3. myCharts.resize()
4. // vue3
5. myCharts.value.resize()
6. })

5、轮播动画效果

需要配置tooltip参数使用，显示tooltip提示框的轮播动画

1. // vue2
2. myChart.currentIndex = -1;
4. setInterval(function () {
5. var dataLen = option.series[0].data.length;
6. // 取消之前高亮的图形
7. myChart.dispatchAction({
8. type: 'downplay',
9. seriesIndex: 0,
10. dataIndex: myChart.currentIndex
11. });
12. myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
13. // 高亮当前图形
14. myChart.dispatchAction({
15. type: 'highlight',
16. seriesIndex: 0,
17. dataIndex: myChart.currentIndex
18. });
19. // 显示 tooltip
20. myChart.dispatchAction({
21. type: 'showTip',
22. seriesIndex: 0,
23. dataIndex: myChart.currentIndex
24. });
25. }, 2000);

6、dispatchAction 行为事件

具体用法参考 echarts 下的 action：https://echarts.apache.org/zh/api.html#action

（1）highlight：高亮指定的数据图形

1. myCharts.currentIndex = -1
2. myCharts.dispatchAction({
3. type: 'highlight',
4. seriesIndex: 0,
5. dataIndex: myCharts.currentIndex
6. });

（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的公共属性配置

1. tooltip: {
2. position:'right',
3. padding: [5,8],
4. textStyle:{
5. color: '#eee',
6. fontSize: 13
7. },
8. backgroundColor: "rgba(13,5,30,.5)",
9. extraCssText:'z-index:1', // 层级
10. axisPointer: {}
11. }

（2）trigger 类型为 item

1. tooltip: {
2. trigger: 'item',
3. formatter: function(param) {
4. let resultTooltip =
5. "" +
6. "" + param.name + "" +
7. "" +
8. "" +
9. " " + param.seriesName + "：" +
10. "" + param.value + "" +
11. "";
12. return resultTooltip
13. }
14. }

（3）trigger 类型为 axis

1. tooltip: {
2. trigger: 'axis',
3. formatter: function(param) {
4. let resultTooltip =
5. "" +
6. "" + param[0].name + "" +
7. "" +
8. "" +
9. " " + param[0].seriesName + "：" +
10. "" + param[0].value + "" +
11. "";
12. return resultTooltip
13. }
14. }

2、axisPointer 坐标指示器

（1）type 类型为 shadow

1. axisPointer: {
2. type: 'shadow',
3. label: { show: true, backgroundColor: 'transparent' },
4. shadowStyle: {
5. color: {
6. type: 'linear',
7. x: 0,
8. y: 0,
9. x2: 0,
10. y2: 1,
11. colorStops: [
12. { offset: 0, color: 'rgba(100, 101, 171, 0)' },
13. { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' },
14. { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' },
15. { offset: 1, color: 'rgba(100, 101, 171, 1)' },
16. ],
17. global: false
18. }
19. }
20. }

（2）type 类型为 line

1. axisPointer: {
2. type: 'line',
3. label: { show: true, backgroundColor: 'transparent' },
4. lineStyle: {
5. color: {
6. type: 'linear',
7. x: 0,
8. y: 0,
9. x2: 0,
10. y2: 1,
11. colorStops: [
12. { offset: 0, color: 'rgba(100, 101, 171, 0)' },
13. { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' },
14. { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' },
15. { offset: 1, color: 'rgba(100, 101, 171, 1)' }
16. ],
17. global: false
18. },
19. type: 'solid',
20. width: 10
21. }
22. }

3、渐变处理

（1）线性渐变区域 LinearGradient

1. // 前四个分参数分别代表右，下，左，上，数值0-1
2. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
3. {
4. offset: 0,
5. color: 'blue'
6. },
7. {
8. offset: 1,
9. color: 'red'
10. }
11. ])

（2）径向渐变区域 RadialGradient

1. // 前三个分参数分别代表圆心（x,y），半径（数值0-1）
2. color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [
3. {
4. offset: 0,
5. color: 'blue'
6. },
7. {
8. offset: 1,
9. color: 'red'
10. }
11. ])

（3）线性渐变区域 colorStops-linear

1. // x,y,x2,y2数值同LinearGradient前四个参数分别代表右，下，左，上，数值0-1
2. color: {
3. type: 'linear',
4. x: 0,
5. y: 0,
6. x2: 0,
7. y2: 1,
8. colorStops: [
9. {
10. offset: 0,
11. color: 'blue'
12. },
13. {
14. offset: 1,
15. color: 'red'
16. }
17. ],
18. global: false // 缺省为 false
19. }

（4）径向渐变区域 colorStops-radial

1. // x 0.5 y 0.5 代表圆心，r 代表半径
2. color: {
3. type: 'radial',
4. x: 0.5,
5. y: 0.5,
6. r: 0.9,
7. colorStops: [
8. {
9. offset: 0,
10. color: 'blue'
11. },
12. {
13. offset: 1,
14. color: 'red'
15. }
16. ],
17. global: false // 缺省为 false
18. }

（5）纹理填充 color-image

1. let url= "../../static/bg_icon.png"
2. color: {
3. image: url, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
4. repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
5. }

4、label中文字通过rich自定义样式设置

1. label: {
2. show: true,
3. formatter: `\n{d|{d}} {unit|${props.unit}}`,
4. rich: {
5. d: {
6. fontSize: 26,
7. fontWeight: 600,
8. color: "#000"
9. },
10. unit: {
11. fontSize: 20,
12. fontWeight: 600,
13. color: "#3C3B3B"
14. }
15. },
16. color: "#000"
17. }

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~