vue项目的echarts使用

一、vue引入使用

1.1 首先下载插件

npm install echarts --save-dev

1.2 main.js文件引入插件,设置成全局

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

1.3 echarts使用

//1、添加容器

<div id="myChart" style="width: 600px;height: 400px;"></div>

//2、基于准备好的dom，初始化echarts实例(main文件已经全局声明了文件,使用this.$echarts即可)
let myChart = this.$echarts.init(document.getElementById("myChart"));
//3、绘制图表
myChart.setOption({
title: { text: "在Vue中使用echarts" },
//气泡弹窗定义
tooltip: {},
// X轴数据定义
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
// Y轴数据定义,可根据最后数据的大小自定义值
yAxis: {},
//数据使用
series: [
{
//气泡弹窗名称
name: "销量”,
// 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
type: "bar”,
// 数据大小
data: [5, 20, 36, 10, 10, 20]
}
]
}); 

二、按需要引入

1.1 点击下列链接去到官网进行定制

https://echarts.apache.org/zh/builder.html

1.2 引入对应的.js文件

<script  src="js/echarts.js"></script> 

1.3 echarts使用

//指定图表的配置项和数据
      var option = {
        //标题
        title: { text: "在Vue中使用echarts" },
        //每项的弹窗提醒可无
        tooltip: {},
        // X轴数据定义
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        // Y轴数据定义,可根据最后数据的大小自定义值(可无)
        yAxis: {},
        //数据使用(必须有)
        series: [
          {
            //弹窗名称
            name: "销量",
            // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
            type: "bar",
            // 数据大小
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      //获取dom容器
      var myChart = echarts.init(document.getElementById("chartmain"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

参考

官方5分钟上手文档

https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts