echarts-vue学习

最新推荐文章于 2024-05-08 20:18:06 发布

Shiki2147

最新推荐文章于 2024-05-08 20:18:06 发布

阅读量376

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/Shiki2147/article/details/122860573

版权

本文介绍了如何在Vue.js项目中集成ECharts库，通过创建新项目、安装ECharts、在main.js中全局配置以及在组件中初始化和使用ECharts，展示了一个简单的条形图的绘制过程。在mounted阶段，利用$echarts初始化图表并设置配置项，最终在页面上显示了ECharts图表。

摘要由CSDN通过智能技术生成

echarts学习

1.配置

1.新建项目
vue create 项目名
2.下载echart包
npm install echarts@4.9.0 --save
3.在main.js配置echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
4.使用echarts
<template>
  <div id="app">
    <div id="demo" ref="view"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log("11111111111",this.$echarts,this.$refs.view)
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(this.$refs.view);
      console.log(myChart)
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
};
</script>
<style>
#app{
  margin: 0;
  padding: 0;
  width: 100%;
  /* background-color: aquamarine; */
}
#demo {
  background-color: antiquewhite;
  width: 400px;
  height: 280px;
}
</style>