封装echarts

聪聪ii

已于 2025-01-03 10:14:53 修改

阅读量198

点赞数 4

文章标签： echarts 前端 javascript

于 2024-12-30 10:52:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41672186/article/details/144815449

版权

1.vue 界面引用

</div>

引入echarts组件和js

import chartOption from './riskChart';

import * as echarts from 'echarts';

2.在script 里面使用

// 预测降雨过程线
let chart1 = null;
const initEchartsZS = async () => {
  chartOption.option22.xAxis[0].data = [];
  if (!!chart1) chart1.dispose();
  chart1 = echarts.init(document.getElementById('chartOneYC'));
  getYbRainfallByHourEnum().then(res => {
    let datas = res.data;
    chartOption.option22.xAxis[0].data = datas.tsStr;
    chartOption.option22.series[0].data = datas.rainList;
    chartOption.option22.series[1].data = datas.rainCountList;
    chartOption.option22.graphic.invisible = datas.tsStr.length > 0; // 暂无数据
    chart1.clear();
    chart1.setOption(chartOption.option22);
  });
};

3.riskChart.js

import useUserStore from '@/store/modules/user';
const pinias = useUserStore();

const chartOption = {
  option1: {
    color: pinias.$state.chartColor,
    tooltip: {
      trigger: 'axis',
      confine: true, //是否将 tooltip 框限制在图表的区域内
    },
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: true, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    title: {
      left: 'left',
      text: '',
      top: 10,
      bottom: 10,
      left: 10,
      textStyle: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: {
      left: '3%',
      right: '7%',
      top: '25%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      top: '2%',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: 'inherit',
      },
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: [1, 2],
        axisLabel: {
          color: '#c6c6c6',
        },
        axisLine: {
          lineStyle: {
            color: '#066592',
          },
        },
      },
    ],
    yAxis: [
      {
        name: '',
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        axisLabel: {
          color: '#c6c6c6',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
      },
    ],
    series: [{ type: 'line', smooth: true, data: [12, 34] }],
  },
  option22: {
    color: pinias.$state.chartColor,
    tooltip: {
      trigger: 'axis',
      confine: true, //是否将 tooltip 框限制在图表的区域内
    },
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: true, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    title: {
      left: 'left',
      text: '',
      top: 10,
      bottom: 10,
      left: 10,
      textStyle: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: {
      left: '3%',
      right: '7%',
      top: '25%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      top: '2%',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: 'inherit',
      },
    },
    xAxis: [
      {
        type: 'category',
        data: ['1', '3'],
        axisLabel: {
          color: '#c6c6c6',
        },
        axisLine: {
          lineStyle: {
            color: '#066592',
          },
        },
      },
    ],
    yAxis: [
      {
        name: '预测雨量(mm)',
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
        axisLabel: {
          color: '#c6c6c6',
        },
      },
      {
        name: '预计累计雨量(mm)',
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#c6c6c6', //字体颜色
          fontSize: 12, //字体大小
          align: 'right', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        axisLabel: {
          color: '#c6c6c6',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
      },
    ],
    series: [
      {
        name: '预测雨量',
        type: 'bar',
        barMaxWidth: 30, // 设置柱子的最大宽度为30
        yAxisIndex: 0,
        data: [12, 25],
      },
      {
        name: '预计累计雨量',
        type: 'line',
        smooth: true,
        yAxisIndex: 1,
        symbolSize: 8,
        data: [13, 20],
      },
    ],
  },
  option3: {
    color: pinias.$state.chartColor,
    grid: {
      bottom: 0,
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}处 ({d}%)',
    },
    legend: {
      orient: 'vertical',
      right: 10,
      y: 'center',
      icon: 'circle',
      textStyle: {
        color: '#c6c6c6',
      },
      formatter: name => {
        let v;
        chartOption.option3.series.data.forEach(item => {
          if (item.name === name) {
            v = item.value;
          }
        });
        return name + '  ' + v + ' 处';
      },
    },
    series: {
      type: 'pie',
      radius: ['55%', '75%'],
      center: ['30%', '50%'],
      label: {
        show: false,
        position: 'outer',
      },
      labelLine: {
        length: 30,
        show: false,
      },
      data: [
        { value: 135.6, name: '低风险区域' },
        { value: 73.5, name: '中风险区域' },
        { value: 10.5, name: '较高风险区域' },
        { value: 12.5, name: '高风险区域' },
      ],
    },
  },
  option4: {
    color: pinias.$state.chartColor,
    // 显示暂无数据
    graphic: {
      type: 'text', // 类型：文本
      left: 'center',
      top: 'middle',
      silent: true, // 不响应事件
      invisible: true, // 有数据就隐藏
      style: {
        fill: '#c6c6c6',
        fontWeight: 'bold',
        text: '暂无数据',
        fontFamily: 'Microsoft YaHei',
        fontSize: '18px',
      },
    },
    tooltip: {
      trigger: 'axis',
      confine: true, //是否将 tooltip 框限制在图表的区域内
    },
    title: {
      left: 'center',
      text: '降雨过程线',
      textStyle: {
        color: '#333', //字体颜色
        fontSize: 16, //字体大小
      },
    },
    grid: {
      left: '3%',
      right: '7%',
      top: '15%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      top: '8%',
      orient: 'horizontal', //horizontal
      left: 'center', //left ,center
      textStyle: {
        color: '#333',
      },
      data: [],
    },
    xAxis: {
      type: 'category',
      data: ['1', '2'],
      axisLabel: {
        color: '#333',
      },
      axisLine: {
        lineStyle: {
          color: '#066592',
        },
      },
    },
    yAxis: [
      {
        name: 'mm',
        type: 'value',
        nameLocation: 'end', // 坐标轴名称显示位置
        nameGap: 15, // 坐标轴名称与轴线之间的距离
        nameTextStyle: {
          color: '#333', //字体颜色
          fontSize: 12, //字体大小
          align: 'left', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
        },
        axisLabel: {
          color: '#333',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#066592',
          },
        },
      },
    ],
    series: [{ name: '降雨量', type: 'bar', barMaxWidth: 30, data: [12, 34] }],
  },
};
export default chartOption;