ECharts图表 HTML页面使用&vue组件使用

绝地灬酷狼 2022-11-27 01:55 185阅读 0赞

# ECharts #

--------------------

> ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网介绍echarts：[https://echarts.apache.org/zh/feature.html][https_echarts.apache.org_zh_feature.html]

# HTML页面使用 #

--------------------

官方实例展示：[https://echarts.apache.org/examples/zh/index.html][https_echarts.apache.org_examples_zh_index.html]

比如说我想在页面中使用官网实例中展示的这个，

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]  
现在该怎么办嘞，打开官方教程，来建立自己的第一个echarts小图表  
官网快速上手：[https://echarts.apache.org/zh/tutorial.html][https_echarts.apache.org_zh_tutorial.html]

根据文档教程，先获取 ECharts；然后引入 ECharts；在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器；然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        
        <script src="./node_modules/echarts/dist/echarts.min.js"></script>
    </head>
    
    <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [70, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: { } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]  
当然使用不同的图表，以不同的方式使用，编写和显示有所不同。但是我发现，会看文档很重要。

# VUE组件使用 #

--------------------

先安装echarts插件：`cnpm install echarts -S`

然后在项目src目录下的main.js中全局引入echarts：

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

然后在相关组件中使用图表：使用的时候注意一个问题，因为我们引入的时候，把echarts以$ echarts的身份放入到vue的原型中，所以在使用echarts的时候我们也要写成`this.$echarts`的形式。

<template>
     <div>
    	
    	<div id="main" style="width: 600px;height:400px;"></div>
     </div>
    </template>
    
    <script> export default { data(){ return { arra: [70, 932, 901, 934, 1290, 1330, 1320] } }, mounted(){ this.drawLine(); }, methods: { drawLine(){ // 基于准备好的dom，通过 this.$echarts 初始化echarts实例 var myChart = this.$echarts.(document.getElementById('main')); // 绘制图表 myChart.setOption({ xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: this.arra, type: 'line', areaStyle: { } }] }); } } } </script>
    
    <style scoped> </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]

参考：[在Vue中使用echarts][Vue_echarts]

[https_echarts.apache.org_zh_feature.html]: https://echarts.apache.org/zh/feature.html
[https_echarts.apache.org_examples_zh_index.html]: https://echarts.apache.org/examples/zh/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/a94898381aef48968598f310a00f7ce5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/31419393bc514be5839a3e5e4131902e.png
[https_echarts.apache.org_zh_tutorial.html]: https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/83c4fa263410444e86a8a652c920f882.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/20c70ca095cd44be9467c5e0f137a558.png
[Vue_echarts]: https://www.jianshu.com/p/cf0a54374419