vue echart配合百度地图

冰码达

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2026-01-08 11:18:38 发布 742 阅读 AI 写同款· GEO 优化 ›

通过npm install echarts 在vue中使用echart，使用以及遇到的问题

echart使用
- option 基本使用与设置
- 添加主题
问题
- heatmap报错Cannot read property 'type' of null

echart使用

直接上代码

<template>
    <div ref="allChart" id="main"></div>
</template>

<style lang="scss" scoped>

</style>

<script>
import echarts from "echarts"
export default {
    data(){
        return {
            myChart: "",
            option: “”，
        }
    },
    created(){
    },
    mounted(){
        this.createChart()
    },
    methods:{
        resizeChart(){   // 主要用于页面大小改变时改变图表大小，如果需要监听浏览器大小改变，可以去看我的另一篇文章https://blog.csdn.net/bslydhs/article/details/106094276
            if(this.myChart){
                this.myChart.resize()
            }
        },
        createChart(){
            this.myChart = echarts.init(this.$refs.allChart)   //使用refs绑定是因为使用id绑定的话，页面不能同时渲染多个该图表
            this.option = {}    //这里的内容可以到echart官网的示例查看，我在下文中也会提到，官网地址：https://echarts.apache.org/examples/zh/index.html
            this.myChart.setOption(this.option)
        },
    },
    watch: {        
    }
}
</script>

option 基本使用与设置

我在这里把自己用到的option的内容整理一下，后期会不断增加内容，大家可以根据自己的需求取相关的内容即可。（如果有用的不对的地方，希望大佬提醒）
文字功底欠缺直接上几张参数对应的图片

{
	title:{ // 标题
		text: '123',
		textStyle: {   //控制标题样式
			color: '#3A7BFF' 
		}
	},
  tooltip: {   // 鼠标放上去的显示的内容部分
       trigger: 'axis',
       axisPointer: {
           type: 'cross',
           label: {   // 可以设置样式
               backgroundColor: '#6a7985'
           },
           formatter: '{a} <br/>{b}: {c} ({d}%)'    // 控制显示的内容
       }
   },
   legend: {  // 对应echart上面的说明项，比如线形图说明每条线的代表内容
       y:'10', //可以用数字，百分比，也可以用bottom，top等
       data: [],
       orient: 'vertical',   //控制横排显示，还是竖排显示，默认横排，vertical代表竖排
   },
   toolbox: {  // 默认是右上角的操作按钮，位置的话可以根据x,y进行调整，可以是百分比或者数字
       y:'10',
       feature: {
           saveAsImage: {},   // 下载echart图标按钮
       }
   },
   grid: {     //控制整个图的一个位置，如果需要改变图的相对位置就修改相关参数就可以了，可以是百分比，也可以是数字，数字30即代表30px
       left: '2%',
       right: '4%',
       bottom: '30',
       top: '10',
       containLabel: true   //当柱状图或线形图的y轴数字过大显示不全时，设置为true即可解决
   },
   xAxis: [    // x轴参数
       {
           type: 'time',
           boundaryGap: false,
           axisLabel:{ 
           textStyle:{
                   color: '#868ba1'
               }
           }, 
           // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
       }
   ],
   yAxis: [   //y轴参数
       {
           type: 'value',
           name: '流量(KB/S)',   // 可以显示在y轴的上面
           axisLabel:{
               textStyle:{  //y轴的相关样式
                   color: '#868ba1'
               }
           }, 
       }
   ],
   dataZoom: [{   // 如果是x轴是时间有关的，可以在下方显示可拖动的时间轴
       type: 'inside'
   }, {
       type: 'slider',
       bottom: '0'
   }],
   series: [
       {
           name: '123',
           type: 'pie',
           center: ["50%", "43%"],
           radius: ['50%', '70%'],
           avoidLabelOverlap: false,
           label: {
               show: false,
               position: 'center'
           },
           emphasis: {
               label: {
                   show: true,
                   fontSize: '30',
                   fontWeight: 'bold'
               }
           },
           labelLine: {
               show: false
           },
           data: this.series
       }
   ]
}

添加主题

关于echart主题，网上很多文章都是引入echart官网上面的主题文件，然后引入该主题文件，但是对于直接使用npm install echart的朋友们来说，是不通用的，导入css文件时会报错，并且无效，正确的方法应该直接import 'echarts/theme/macarons.js'，然后直接在生成mychart时添加参数，this.myChart = echarts.init(this.$refs.lineChart, 'macarons')