echarts

echarts

是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
echarts官方网址：https://echarts.apache.org/zh/index.html

安装

npm i echarts -S

定制化使用

<template>
  <div class="table">
    <div class="chart" ref="chart" style="height:650px;width:1800px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data(){
    return{
      chart:null
    }
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      const option = {
        title: {
          text: "Stacked Line",
          show: false,
        },
        tooltip: {
          trigger: "axis",
          show: true,
        },
        //图例组件
        legend: {
          show: true,
          right: "10%",
          data: [
            {
              name: "Email",
              icon: "rect", // 用矩形替换
            },
            {
              name: "Union Ads",
              icon: "rect",
            },{
              name: "Video Ads",
              icon: "rect",
            },{
              name: "Direct",
              icon: "rect",
            },{
              name: "Search Engine",
              icon: "rect",
            },
          ],
          itemWidth: 25, //矩形宽度
          itemHeight: 2, //矩形高度
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          // top: "20%",
          //   bottom: "10%",
          //   left: "8%",
          //   right: "8%",
          containLabel: true,
          //  show:true,
        },
        //工具栏
        toolbox: {
          show: true,
          feature: {
            // saveAsImage: {},
            //  dataZoom:{}
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          name: "我是横坐标",
          nameLocation: "middle",
          nameTextStyle: {
            color: "#fff",
            fontSize: "20px",
          },
          nameGap: 40,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: true,
            inside: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              color: ["rgba(43,70,126,1)"],
              width: 2,
            },
            show: true, //隐藏或显示
          },
          show: true,
          name: "我是纵坐标",
          nameLocation: "middle",
          nameTextStyle: {
            color: "#fff",
            fontSize: "20px",
          },
          nameGap: 60,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            inside: true,
            lineStyle: {
              // type:'dashed',
              // type: [500, 1000],
              // dashOffset:1000
            },
          },
        },
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            // smooth: true,
            showSymbol: false,
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            // smooth: true,
            showSymbol: false,
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            // smooth: true,
            showSymbol: false,
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            // smooth: true,
            showSymbol: false,
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            // smooth: true,
            showSymbol: false,
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      if(this.chart !==null && this.chart !=="" && this.chart !== undefined){
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption(option);
      
    },
  },
};
</script>