【插件】图表Echarts使用笔记

时间 2021-05-31 标签 javascript html java apache npm echarts dom ui this spa

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