首页 > 其他 > 详细

vue项目中使用echarts

时间:2020-12-09 18:35:07      阅读:30      评论:0      收藏:0      [点我收藏+]

一、直接引入echarts

   1. 安装echarts项目依赖    npm install echarts --save

2.安装完成后 ECharts 和 zrender 会放在 node_modules 目录下,我们可以直接在项目代码中使用 require(‘echarts‘) 来使用。
或者在main.js中全局引入 import echarts from "echarts"; Vue.prototype.$echarts = echarts;
<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
   mounted(){
        this. drawChart();
    },
  methods:{
        drawChart(){
            var echarts = require(echarts);
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById(main));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: ECharts 入门示例
                },
                tooltip: {},
                xAxis: {
                    data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]
                },
                yAxis: {},
                series: [{
                    name: 销量,
                    type: bar,
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
         },
    }
</script>

 

vue项目中使用echarts

原文:https://www.cnblogs.com/zhangxingxia/p/14110177.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!