vue+echarts实带渐变效果的折线图

更新时间：2022年04月02日 18:07:56 作者：Cherry☼

这篇文章主要为大家详细介绍了vue+echarts实带渐变效果的折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue+echarts实带渐变效果折线图的具体代码，供大家参考，具体内容如下

1、安装echarts

npm install echarts --save

2、引入echarts

import echarts from "echarts";
//修改原型链,可在全局使用
Vue.prototype.$echarts = echarts;

3、创建图表首先需要在 HTML 中创建图表的容器

<div id="echarts_coverage"></div>
// css  图表的容器必须指定宽高
#echarts_coverage{
      width: 400px;
      height: 200px;
}

4、渲染图表

<script>
export default {
  mounted() {
    this.initLineChart();
  },
  methods: {
    initLineChart() {
      let data = [
        {
          dateStr: "2019第1季度",
          numberStr: 10,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 50,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 35,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 92,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 70,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 80,
        },
      ];
      let lineData = {};
      lineData.label = data.map((item) => item.dateStr);
      lineData.data = data.map((item) => item.numberStr);
      let chart = this.$echarts.init(
        document.getElementById("echarts_coverage")
      );
      let option = {
        color: ["#3DB821"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "8%",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          offset: 6,
          axisLine: { lineStyle: { color: " #CCCCCC" } },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            rotate: 18,
            textStyle: {
              color: "#000",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 13,
              margin: 10,
            },
          },
          data: lineData.label,
        },
        yAxis: {
          type: "value",
          name: "(%)",
          nameTextStyle: {
            align: "right",
            color: "#4D4D4D",
          },
          axisLine: {
            show: false,
            lineStyle: { color: "#CCCCCC" },
          },
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: { type: "dashed", color: "#CCCCCC" },
          },
          axisLabel: {
            textStyle: {
              color: "#4D4D4D",
              fontSize: 14,
            },
          },
        },
        series: [
          {
            name: "数量",
            type: "line",
            stack: "总量",
            // symbol: "circle",
            symbolSize: 8,
            minInterval: 6,
            data: lineData.data,
            smooth: false,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#3DB821", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(51,180,21,.5)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(51,180,21,.1)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue3.x使用swiperUI动态加载图片失败的解决方法
这篇文章主要为大家详细介绍了vue3.x使用swiperUI动态加载图片失败的解决方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
Vue+webpack实现懒加载过程解析
这篇文章主要介绍了Vue+webpack实现懒加载过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
Vue如何获取数据列表展示
这篇文章主要为大家详细介绍了Vue如何获取数据列表展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
如何给element添加一个抽屉组件的方法步骤
这篇文章主要介绍了如何给element添加一个抽屉组件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
Vue实现时间轴效果
这篇文章主要为大家详细介绍了Vue实现时间轴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue el-date-picker动态限制时间范围案例详解
这篇文章主要介绍了vue el-date-picker动态限制时间范围案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
解决vue页面刷新，数据丢失的问题
这篇文章主要介绍了解决vue页面刷新，数据丢失的问题，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
今天小编就为大家分享一篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
axios取消请求CancelToken的用法示例代码
Axios提供了取消请求的功能,可以通过使用CancelToken来实现,这篇文章主要给大家介绍了关于axios取消请求CancelToken的用法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
Vue实现简单选项卡功能
这篇文章主要为大家详细介绍了Vue实现简单选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03