Echarts可视化大屏入门

这篇文章主要是用vue2项目写echarts

以下都是入门 想要精通还需去官网学习API和配置项

先创建一个盒子 设置宽高属性

绑定ref事件

import * as echarts from "echarts"; 引入echarts

在methods里写一个方法

initMessage() {
      if(this.$refs.message == null){
        return
      }
      echarts.dispose(this.$refs.message);//删除dom元素
      var chartDom = this.$refs.message;  //通过refs获取dom元素
      var myChart = echarts.init(chartDom); 
      myChart.setOption(this.messageoption); //调用option进行渲染
},

1. 在 data 中加入option

   message 
   option: {
        legend: {},
        tooltip: {},
        dataset: { 
          dimensions: ["product", "土地流转信息", "找地需求信息"],
          source: [],
          color: "#fff",
        },
        xAxis: { //x轴属性
          type: "category",
          axisLine: {
            //这是x轴文字颜色
            lineStyle: {
              color: "aqua",
            },
          },
        },
        yAxis: { //x轴属性
          type: "value",
          min: 0,//y轴最小数
          max: 350, //y轴最大数
          interval: 50, //每行间隔的值
          mininterval: 1, //限定为整数
          axisLine: {
            //这是x轴文字颜色
            lineStyle: {
              color: "aqua",
            },
          },
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.

        series: [
          { type: "bar", barWidth: 20 }, //barWidth设置柱状图的宽度
          { type: "bar", barWidth: 20 }, //颜色也在这设置
        ],
      },

1. 如果是接口请求数据时

async gettypes() {
      let res = await axios.get("http://127.0.0.1:7001/big/gettypes");
      if (res.data.code == 200) {
        console.log(res.data);
        this.option.series[0].data = res.data.data; //将数据根据相应的路径写入
        this.$nextTick(() => { //等待数据渲染完成执行调用
          this.initBusinesstype();
        });
      }
  },

 下一篇文章将详细的讲解echarts配置项