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