【vue-echarts】笔记

安装

下载

npm install echarts vue-echarts --save

然后全局引入

//main.js
import Vue from 'vue'
import ECharts from "vue-echarts";
Vue.component('v-chart', ECharts)//全局注册

在对应的文件里面具体使用

<template>
   <v-chart 
   :option="option_column"
   style="width: 100%;height:100%;"
   :auto-resize="true"
   >
   </v-chart>
</template>
 
<script>
export default {
  data() {
    return {
      option_column: {
        // title: { text: "Column Chart" },
        tooltip: {},
        grid: {
          left: "8%",
          right: "8%",
          bottom: "10%",
          top: "3%",
          //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
          // containLabel: true,
          // // 是否显示直角坐标系网格
          // show: true,
          // //grid 四条边框的颜色
          // borderColor: "rgba(0, 240, 255, 0.3)"
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子","衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
};
</script>

设置渐变色

 color: {
          // type: 'linear',
           x: 0,
           y: 0,
           x2: 0,
           y2: 1,
           colorStops: [
             {
               offset: 0,
               color: '#37a2da' // 0% 处的颜色
             },
             {
               offset: 0.5,
               color: '#32c5e9' // 100% 处的颜色
             },
             {
               offset: 1,
               color: '#9fe6b8' // 100% 处的颜色
             }
           ]
         },

效果