Vue关于echats的使用（浅显易懂）

刺骨的言语ヽ痛彻心扉 2021-08-13 19:37 307阅读 0赞

## 安装 ##

npm install echarts --save

## 引入 （全局） ##

main.js

import * as echarts from 'echarts';
    
    Vue.prototype.$echarts = echarts

## 使用 ##

index.vue

<template>
    	<div>
    	   	<div id='line'></div>
        </div>
    </template>
    <script> export default { name:'index', mounted(){ const myChart = this.$echarts.init(document.getElementById("line")); //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候） window.addEventListener("resize", function() { myChart.resize(); }); myChart.setOption({ color: ["#5fe3a1"], tooltip: { trigger: "axis", axisPointer: { type: "shadow", label: { show: true } } }, xAxis: { type: "category", data: ["12.3", "12.4", "12.5", "12.6", "12.7", "今天"], boundaryGap: false, axisTick: { alignWithLabel: true }, axisLine: { lineStyle: { color: "#A1A0AE" } } }, yAxis: { type: "value", axisLine: { lineStyle: { color: "#A1A0AE" } } }, series: [ { name: "日门诊量", type: "line", smooth: true, //平滑曲线显示 symbolSize: 10, //标记的大小 areaStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(60,196,128, 0.7)" }, { offset: 1, color: "rgba(254,254,254,0)" } ], globalCoord: false } }, data: [8100, 5000, 8596, 6000, 7500, 5500] } ] }); } } </script>
    <style scoped> #line{ width: 100%; height: 407px; margin: 0 auto; } </style>

## 效果 ##

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

## 案例网址 ##

[案例][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]  
直接复制代码，放在 `myChart.setOption()`即可

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20210813/795e72f9e76c4b6586dd5c9c576778e5.png
[Link 1]: https://gallery.echartsjs.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: /images/20210813/13f7ed426c3945b2a519cccd8d16027a.png