Vue使用ECharts

最新推荐文章于 2024-09-30 14:28:41 发布

good_good_study5

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量142

点赞数 2

文章标签： vue.js html echarts Powered by 金山文档

本文链接：https://blog.csdn.net/good_good_study5/article/details/129630307

版权

前提

搭建好的vue项目

安装ECharts

npm install echarts --save

部署

全局引用

在main.js里面输入如下代码：

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

div容器

template里面div命名一个id，可以设置style 的长宽，可以不设置

演示

这里进行一个柱状图示例的演示

methods:{
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的div的id对应
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        //x轴
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        //y轴
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
},
//利用钩子函数，在初始化页面时候加载方法
mounted(){
   this.drawChart();
}