[JavaScript知识库]Echarts在vue中的使用

前端ECharts使用（vue）

ECharts官网：https://echarts.apache.org/examples/zh/index.html

各基础标签含义(可参考https://blog.csdn.net/qq_43299315/article/details/107952031)

title：标题
	backgroundColor: 'rgba(0,0,0,0)',
     borderColor: '#ccc',       // 标题边框颜色
     borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
     padding: 5,                // 标题内边距，单位px，默认各方向内边距为5   接受数组分别设定上右下左边距，同css
     itemGap: 10,               // 主副
		···
toolbox：
	    orient: 'horizontal',      // 布局方式，默认为水平布局，可选为： 'horizontal' | 'vertical'
        borderColor: '#ccc',       // 工具箱边框颜色
        borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
        itemSize: 16,              // 工具箱图形宽度
        featureTitle : {
            mark : '辅助线开关',
            markUndo : '删除辅助线',
            markClear : '清空辅助线',
            dataZoom : '区域缩放',
            dataZoomReset : '区域缩放后退',
            dataView : '数据视图',
            lineChart : '折线图切换',
            barChart : '柱形图切换',
            restore : '还原',
            saveAsImage : '保存为图片'
           
legend：图例（数组）

xAxis:x轴各参数
      type：category
      data：数据（数组）
      
yAxis：y轴各参数
	type：value （数据）
    axisLabel: {
            formatter: "￥{value} ",（修饰值）
          }
            
series：系列样式
	name：某图例
	type：类型  
    	bar：柱形图
        line:折线图
        pie：饼图
        map：地图
        scatter：散点图
    data：数据（数组）

vue使用ECharts简要步骤

下载ECharts

npm i echarts

main.js引入echarts

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

各vue文件引入echarts

import * as echarts from 'echarts'

初始化图表

export default {
  name: "",
  components: {},
  data() {
    return {
      option: {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
          },
        },
        xAxis: {
          type: "category",
          data: [],
        },

        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 件",
          },
        },
        series: {
          type: "bar",
          data: [],
        },
      },
    };
  },

css部分

  <div class="Echarts">
    <el-tabs
      style="margin-left: 20px"
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="当前库存" name="first">
        <div v-show="1 == 0">{{ textadd }}</div>
        <div id="main" style="width: 600px; height: 400px"></div>
      </el-tab-pane>
    </el-tabs>
  </div>

js部分（方法体内）

var myChart = echarts.init(document.getElementById("main"));
...后端获取数据，赋值前端	
myChart.setOption(this.option);

附：

年月日横坐标初始化

  let yy = new Date().getFullYear();
    let mm =
      new Date().getMonth() + 1 < 10
        ? "0" + (new Date().getMonth() + 1)
        : new Date().getMonth() + 1;
    let date =
      new Date().getDate() < 10
        ? "0" + new Date().getDate()
        : new Date().getDate();
    this.day = yy + "年" + mm + "月" + date + "日";

• 初始化中数据可空，待后端获取数据后赋值

• 多个图例需初始化对应数量series中对象

• {

  ? name: “”,

  ? type: “”,

  ? data: [],

  ? },

• 赋值注意各对象上下级及数据类型

• 据实际情况可先将数据全赋值0，

   this.option.series[0].data = new Array(31).fill(0);
  

• 多张图表需重复步骤，包括初始化、css、js部分