前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue关于echats的使用(浅显易懂)

Vue关于echats的使用(浅显易懂)

作者头像
马克社区
发布2022-05-23 17:00:25
1740
发布2022-05-23 17:00:25
举报
文章被收录于专栏:高端IT高端IT

安装

npm install echarts --save

引入 (全局)

main.js

import * as echarts from ‘echarts’;

Vue.prototype.$echarts = echarts

使用

index.vue

代码语言:javascript
复制
<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]
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119327784

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档