首页 > 其他分享> 文章详细

vue 引入echars 亲测版

2022-08-21 15:30:22 阅读：153 来源： 互联网

标签：echars vue 20 myChart 20% data echarts 亲测

网上找了很多例子，其中有修改main.js的配置的，反正我没搞成功，最后实验成功的步骤如下

1、首先创建一个Vue CLI 的工程。

注：具体步骤查看以前的博客 https://www.cnblogs.com/yclh/p/15356171.html

2.安装echarts依赖

D:\soft\vueechars>npm install echarts@4.9.0 --save

3、将App.vue 的代码用如下代码替换

<template>
    <div>
         <div style="width:550px;height:300px" ref="chart"></div>
    </div>
</template>
<script>
    import   echarts from 'echarts' //这里引入echars
    export default {
      data() {
        return {};
      },
      methods: {
        initCharts() {
          let myChart = echarts.init(this.$refs.chart);
          console.log(this.$refs.chart); // 绘制图表
          myChart.setOption({
            title: { text: "在Vue中使用echarts" },
            tooltip: {},
            xAxis: {
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [
              {
                name: "销量",
                type: "bar",
                data: [5, 20, 46, 10, 10, 20]
              }
            ],
            grid: {
                height: '40%',
                left: '20%',
                top: '20%'
            }
          });
        }
      },
      mounted() {
        this.initCharts();
      }
    };
</script>

4、效果

启动项目 npm run serve

浏览器输入 http://localhost:8080/

标签：echars,vue,20,myChart,20%,data,echarts,亲测
来源： https://www.cnblogs.com/yclh/p/16610073.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 引入echars 亲测版