【插件】圖表Echarts使用筆記

時間 2021-05-31

標籤 javascript html java apache npm echarts dom this spa 欄目 JavaScript 简体版

原文原文鏈接

1、開始

官網： https://echarts.apache.org/zh...javascript

配置文檔：https://echarts.apache.org/zh...html

術語速查手冊：https://echarts.apache.org/zh...
能快速瞭解每一個位置的組件的名字，而後在文檔配置項裏快速查看支持什麼參數。
java

2、 5分鐘上手ECharts

步驟： 一、引入》二、準備容器》三、初始化實例並設定配置項apache

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定圖表的配置項和數據
        var option = {...}; //各類配置
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

3、Vue ECharts全局引入與按需引用

## 安裝 
npm install echarts --save

一、全局引入

步驟： mainjs中配置註冊組件》組件中直接使用this.$echartsnpm

## 在main.js中配置
import echarts from 'echarts'  //引入echarts
Vue.prototype.$echarts = echarts  //註冊組件

## 使用
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
<script>
export default {
    name: 'eCharts',
    data () {
        return {
        msg: 'Welcome to Your Vue.js App'
        }
    },
    mounted(){
        this.drawLine();
    },
    methods: {
        drawLine(){
            // 基於準備好的dom，初始化echarts實例
            var myChart = this.$echarts.init(document.getElementById('myChart'))
            // 繪製圖表
            myChart.setOption({}); //各類配置
        }
    }
}
</script>

二、按需引入

步驟： 不須要在main.js中配置。在組件裏按需引入使用echartsecharts

## ---------- 方法一 開始  --------------
// 引入基本模板
let echarts = require('echarts') 

// 引入所須要用到的柱狀圖組件  (選引)
require('echarts/lib/chart/bar') 

// 引入其餘所須要用到的基礎組件 提示框和title組件等 (選引)根據術語速查手冊
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
## ---------- 方法一 開始  --------------


## ---------- 方式二 開始  --------------
// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必需要的接口。
import * as echarts from 'echarts/core'; 

// 引入所需圖標 柱狀圖圖表，圖表後綴都爲 Chart
import { BarChart } from 'echarts/charts'; 

// 引入提示框，標題，直角座標系組件，組件後綴都爲 Component ，根據術語速查手冊
import { TooltipComponent, GridComponent } from 'echarts/components'; 

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import { CanvasRenderer } from 'echarts/renderers'; 

// 註冊必須的組件
echarts.use([TooltipComponent, GridComponent, BarChart, CanvasRenderer]); 

## ---------- 方式二 結束  --------------


## 使用
export default {
    name: 'eCharts',
    mounted(){
        this.drawLine();
    },
    methods: {
        drawLine(){
            // 基於準備好的dom，初始化echarts實例
            var myChart = echarts.init(document.getElementById('myChart'))
            // 繪製圖表
            myChart.setOption({
                title: { text: '在Vue中使用echarts' },
                tooltip: {},
                xAxis: {
                    data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }
    }
}

mark一下僅供參考歡迎更正補充 Thanks粗體dom