echart.js在vue中使用

最新推荐文章于 2024-06-04 23:08:49 发布

转载最新推荐文章于 2024-06-04 23:08:49 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhihou/p/9681680.html

文章标签：

#javascript #python #ViewUI

本文介绍如何使用ECharts库在网页中初始化图表，并通过数据绑定动态更新图表内容。文章详细展示了在Vue项目中引入ECharts并进行图表配置的过程，包括在组件生命周期内初始化图表实例，以及使用数据遍历填充图表数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前可能写过，懒得去翻了，再写一次

1，安装echarts 导入到页面

 import echarts from 'echarts';

2.在生命周期里面做初始化

data(){
   return{
        teacherChart:null
    } 
}

created(){
  this.teacherChart= echarts.init(document.getElementById('teacherChart'));  
  //执行一个函数
  this.teacherCont();
},
methods:{
    teacherCont(){
        /*要哪个图去官网拿，不多写了*/
        const chartOption={
            title:{},
            tooltip:{},
            series:[{
              data:[
                  {val：数据里面的值，name:‘关注’}，
                  {val：数据里面的值，name:‘不关注’}，
               ]
            }]
        }
        this.teacherChart.setOption(chartOption);
    }
}

上面是最简单的图表

来一个数据遍历的

比如x轴

xAxis: {
      data: this.chartData.map(item => {
           return item.name;
      }),
      axisLabel:{
           interval: 0,
           rotate: 60
      },
      axisLine: {
           show: false,
           lineStyle: {
              color: '#a3a3a3'
           }
      }
 },像这样遍历出来就可以

转载于:https://www.cnblogs.com/zhihou/p/9681680.html