一些ECharts配置

已于 2023-10-19 09:01:28 修改
阅读量188 收藏
点赞数
文章标签： echarts javascript 前端
于 2023-10-18 14:22:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42112342/article/details/133904908
版权

基于vue3，EChart5.4.3版本

Line

<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref, watch} from "vue"
import {useEcharts, type ECOption} from "@/composables"
import * as echarts from "echarts/core";

const chartOptions = ref<ECOption>();
const {domRef: chart} = useEcharts(chartOptions);

const props = defineProps({
  chartXData: {
    type: Array,
    default: []
  },
  chartYData: {
    type: Array,
    default: []
  },
  seriesData: {
    type: Array,
    default: []
  },
  seriesNameList: {
    type: Array,
    default: []
  },
  yName: {
    type: String,
    default: ''
  },
  lineColorList: {
    type: Array,
    default: ['rgba(1, 145, 219, 1)', 'rgba(9, 162, 51, 1)', 'rgba(191, 153, 18, 1)']
  },
  isAreaStyle: {
    type: Boolean,
    default: false
  },
  areaColorStyle: {
    type: Array,
    default: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: 'rgba(3, 200, 242, 0.64)',
      },
      {
        offset: 1,
        color: 'rgba(3, 200, 242, 0)',
      },
    ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: 'rgba(4, 148, 44, 0.16)',
      },
      {
        offset: 1,
        color: 'rgba(4, 148, 44, 0)',
      },
    ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: '#BF9912AB',
      },
      {
        offset: 1,
        color: '#BF991200',
      },
    ])]
  },
  stack: {
    type: String,
    default: ''
  },
  isSmooth: {
    type: Boolean,
    default: false
  },
  symbol: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  topGrid: {
    type: String,
    default: '25'
  },
})

const watcher = watch(()=> props.seriesData, (value: any) => {
  chartOptions.value.series = getSeriesData(value)
})

const watcherTitle = watch(()=> props.title, (value: any) => {
  chartOptions.value.title['text'] = value
})

const watcherXData = watch(()=> props.chartXData, (value: any) => {
  chartOptions.value.xAxis.data = value
})

onBeforeUnmount(() => {
  watcher();
  watcherTitle();
  watcherXData();
})

const getChartData = () => {
  updateChartOptions();
}

const updateChartOptions = () => {
  chartOptions.value = {
    title: {
      text: props.title,
      left: 0,
      top: 5,
      textStyle: {
        fontSize: 16,
      },
    },
    backgroundColor: 'white',
    tooltip: {
      trigger: 'axis',
      color: '#fff', // 设置文字颜色为白色
      backgroundColor: 'rgba(16,24,41)', // 设置背景颜色为黑色，透明度为0.7
      borderColor: 'rgba(16,24,41)', // 设置边框颜色为白色
      borderWidth: 1, // 设置边框宽度为1px
    },
    legend: {
      left: 'right',
      top: 10,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 16,
      borderRadius: 4,
      color: 'rgba(202,231,254,0.5)',
      fontSize: 10,
    },
    xAxis: {
      type: 'category',
      data: props.chartXData,
      boundaryGap: false,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 1,
        show: true,
        color: 'rgba(202,231,254,0.5)', //X轴文字颜色
      },
    },
    yAxis: [
      {
        type: 'value',
        nameTextStyle: {
          color: '#CAE7FE80',
          // fontFamily: 'Alibaba PuHuiTi',
          fontSize: 10,
          fontWeight: 600,
          // padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
        },
        nameGap: 10, // 表现为上下位置
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: 'rgba(202,231,254,0.5)',
          fontSize: 10,
          // interval: 2, // 设置为0表示每隔一个显示一个标签
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(147,219,209,0.16)',
          },
        },
      },
      {
        type: 'value',
        // name: '金额：万元',
        nameTextStyle: {
          color: 'rgba(202,231,254,0.5)',
          fontFamily: 'Alibaba PuHuiTi',
          fontSize: 10,
          fontWeight: 600,
          // padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
        },
        position: 'right',
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          formatter: '{value}', //右侧Y轴文字显示
          textStyle: {
            color: 'rgba(202,231,254,0.5)',
          },
        },
      },
    ],

    series: getSeriesData(props.seriesData),
    grid:{ // 让图表占满容器
      top:"50px",
      left:"20px",
      right:"50px",
      bottom:"0px",
      containLabel: true,
    }

  };
}

const getSeriesData = (seriesData: any) => {
  const length = props.seriesNameList?.length
  let seriesArray = []
  for (let i = 0; i < length; i++) {
    seriesArray.push({
      name: props.seriesNameList?.[i],
      type: 'line',
      showAllSymbol: true, //显示所有图形。
      // stack: props.stack,//stack1
      smooth: props.isSmooth,
      areaStyle: {
        // 设置堆叠效果的颜色和透明度
        color: props.areaColorStyle?.[i],
      },
      symbol: props.symbol, //标记的图形为实心圆 rect
      symbolSize: 4, //标记的大小
      lineStyle: {
        color: props.lineColorList?.[i],
      },
      itemStyle: {
        color: props.lineColorList?.[i]
      },
      data: seriesData?.[i],
    })
  }
  return seriesArray

}

onMounted(() => {
  getChartData();
})

</script>

<template>
  <div class="wh-full" ref="chart"></div>
</template>

<style scoped>

</style>

Bar

<script setup lang="ts">
import {onMounted, ref,onBeforeUnmount,watch} from "vue"
import {useEcharts, type ECOption} from "@/composables"
import * as echarts from "echarts/core";

const chartOptions = ref<ECOption>();
const {domRef: chart} = useEcharts(chartOptions);

const props = defineProps({
  chartXData: {
    type: Array,
    default: []
  },
  chartYData: {
    type: Array,
    default: []
  },
  seriesData: {
    type: Array,
    default: []
  },
  seriesNameList: {
    type: Array,
    default: []
  },
  yName: {
    type: String,
    default: ''
  },
  barWidth: {
    type: String,
    default: '16'
  },
  title: {
    type: String,
    default: ''
  },
  topGrid: {
    type: String,
    default: '40px'
  },
  lineColorList: {
    type: Array,
    default: ['rgba(1, 145, 219, 1)', 'rgba(191, 153, 18, 1)', 'rgba(9, 162, 51, 1)']
  },
  areaColorStyle: {
    type: Array,
    default: [new echarts.graphic.LinearGradient(0, 0, 1, 1, [
      {
        offset: 0,
        color: '#3A65F7FF',
      },
      {
        offset: 1,
        color: '#20C2F0FF',
      },
    ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: '#BF9912AB',
      },
      {
        offset: 1,
        color: '#BF991200',
      },
    ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: '#03C8F200',
      },
      {
        offset: 1,
        color: 'rgba(4, 148, 44, 0)',
      },
    ])]
  },
})

const watcher = watch(()=> props.seriesData, (value: any) => {
  chartOptions.value.series[0].data = value
})

const watcherXData = watch(()=> props.chartXData, (value: any) => {
  chartOptions.value.yAxis[0].data = value
})

onBeforeUnmount(() => {
  watcher();
  watcherXData();
})

const getChartData = () => {
  updateChartOptions();
}

const updateChartOptions = () => {
  chartOptions.value = {
    backgroundColor: '#FFFFFF',
    title: {
      text: props.title,
      left: 16,
      top: 10,
      textStyle: {
        fontSize: 16,
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
      confine: true,
      textStyle: {
        color: '#fff', // 设置文字颜色为白色
      },
      backgroundColor: 'rgba(16,24,41)', // 设置背景颜色为黑色，透明度为0.7
      borderColor: 'rgba(16,24,41)', // 设置边框颜色为白色
      borderWidth: 1, // 设置边框宽度为1px
    },
    legend: {
      left: 'right',
      top: 20,
      textStyle: {
        color: '#FFFFFFE6',
        fontSize: 14,
      },
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 15,
    },
    xAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#FFFFFF4D',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'category',
        data: props.chartXData,
        nameTextStyle: {
          color: '#FFFFFF4D',
          fontFamily: 'Alibaba PuHuiTi',
          fontSize: 14,
          fontWeight: 600,
          // padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
        },
        nameGap: 10, // 表现为上下位置
        axisLine: {
          show: true,
          lineStyle: {
            color: '#FFFFFF4D',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#FFFFFFE6',
          fontSize: 14,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(147,219,209,0.16)',
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        data: props.seriesData,
        barWidth: `${props.barWidth}rem`,
        itemStyle: {
          // 设置堆叠效果的颜色和透明度
          color: props.areaColorStyle?.[0],
        },
        lineStyle: {
          color: props.lineColorList?.[0],
        },
        showBackground: true,
        backgroundStyle: {
          color: '#20C2F01A'
        }
      },

    ],
    grid: { // 让图表占满容器
      top: `${props.topGrid}px`,
      left: "16px",
      right: "30px",
      bottom: "24px",
      containLabel: true,
    }
  };
}

const getSeriesData = () => {
  const length = props.seriesNameList?.length
  let seriesArray = []
  for (let i = 0; i < length; i++) {
    seriesArray.push({
      name: props.seriesNameList?.[i],
      type: 'bar',
      barWidth: `${props.barWidth}rem`,
      itemStyle: {
        // 设置堆叠效果的颜色和透明度
        color: props.areaColorStyle?.[i],
      },
      lineStyle: {
        color: props.lineColorList?.[i],
      },
      data: props.seriesData?.[i],//props.seriesData?.[i]
    })
  }
  return seriesArray
}

onMounted(() => {
  getChartData();
})


</script>

<template>
  <div class="wh-full" ref="chart"></div>
</template>

<style scoped>

</style>

Pie

<script setup lang="ts">
import {onMounted, ref,onBeforeUnmount,watch} from "vue"
import {useEcharts, type ECOption} from "@/composables"
import * as echarts from "echarts/core";

const chartOptions = ref<ECOption>();
const {domRef: chart} = useEcharts(chartOptions);

const props = defineProps({
  percentData: {
    type: Number,
    default: 0
  },
})

const watcher = watch(()=> props.percentData, (value: any) => {
  chartOptions.value.series[1].data[1].value = value
  chartOptions.value.series[1].data[0].value = 100 - value
})

onBeforeUnmount(() => {
  watcher();
})

const getChartData = () => {
  updateChartOptions();
}

const updateChartOptions = () => {
  chartOptions.value = {
    tooltip: {
      show: 'false',
    },
    series: [
      {
        type: 'pie',
        radius: ['65%', '71%'],
        tooltip: {
          show: false // 禁用该 pie 的悬浮提示
        },
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        emphasis: {
          disabled: false,
          scale: false,

        },
        color: ['#0e2a4dFF'],
        data: [
          { value: 100},
        ]
      },
      {
        type: 'pie',
        radius: ['71%', '86%'],
        tooltip: {
          show: false // 禁用该 pie 的悬浮提示
        },
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        emphasis: {
          disabled: false,

        },
        itemStyle: {
          borderColor: '#0F0F11FF',
          borderWidth: 1
        },
        color: ['#257B4FFF','#C8676DFF'],//C8676DFF
        data: [
          { value: 100 - props.percentData , name:'1'},
          { value: props.percentData, name:'2' },
        ]
      },
      {
        type: 'pie',
        radius: ['86%', '100%'],
        tooltip: {
          show: false // 禁用该 pie 的悬浮提示
        },
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        emphasis: {
          disabled: false,
          scale: false,
        },
        color: ['#0e2a4eFF',],
        data: [
          { value: 100},
        ]
      }
    ],

  };
}

onMounted(() => {
  getChartData();
})

</script>

<template>
  <div class="wh-full" ref="chart"></div>
</template>

<style scoped>

</style>

使用

<template>
  <Line
      class="w-[calc(100%-30px)] h-[calc(100%-40px)] ml-15"
      :chartXData="chartXLineData"
      :seriesData="seriesLineData"
      :seriesNameList="seriesNameList"
      stack="stack1"
      symbol="rect"
      :title="`服务访问总数 ${titleData}`"
      top-grid="50"
      :isSmooth="true"
  ></Line>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue"
import Line from '../Line.vue'

onMounted(() => {
  init();
})

const chartXLineData = ref([])
const seriesNameList = ref(["", '', ''])
const seriesLineData = ref<number[]>([])
const lineColorList = ["rgba(1, 145, 219, 1)", 'rgba(9, 162, 51, 1)', "rgba(191, 153, 18, 1)"]
const seriesList = []

</script>
<style lang="scss" scoped>

</style>

我的账号昵称
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts的基础配置
m0_65849649的博客
10-25 976
Echarts基础图标配置
Echarts 配置渐变
就是个弟弟的博客
05-07 1990
官方文档：https://echarts.apache.org/zh/option.html#color 实现方式： 两种不同的写法本质都一样，`echarts.graphic.LinearGradient` 只是封装了一个方法 在数据中配置 将配置写到数据的每个项目中，适用于每个图形都需要配置单独的渐变情况。 关键代码color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 百分之0状态之下的颜色值 { offset:
Vue和React引入echarts方式汇总
前端小记
07-05 2260
echarts在Vue和React中的使用看这个就够啦！
vue3关于echarts按需引入问题以及设置了markPoint之后最大值和最小值不在图表里面显示的问题
W78955的博客
10-20 3237
vue3关于echarts按需引入问题以及设置了markPoint之后最大值和最小值不在图表里面显示的问题
echarts配置详解
qq_45859670的博客
11-12 2178
官方配置项文档 配置 color颜色 color:['pink','blue','white','black','green'] //颜色盘，循环 grid网格配置 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图） left:10% //left,right,top,bottom ,grid 组件离容器左右上下的距离 show:true //是否显示直角坐标系网格 containLabel:true
echarts配置项手册整理
weixin_41909678的博客
01-13 2798
title: {...}, 标题组件，包含主标题和副标题 legend: {...}, 图例组件 展现不同系列的标记，颜色和名字 grid: {...}, 直角坐标系内绘制网格 xAxis: {...}, 直角坐标系 grid 中的 x 轴 yAxis: {...}, 直角坐标系 grid 中的 y 轴 tooltip: {...}, 提示框组件 axisPointer: {...}, 坐标轴指示器的全局公用设置 toolbox: {...}, 工具栏。 内...
Echarts的一些配置
Luckygirl_jian的博客
11-14 1405
关于Echarts的一些配置 （1）X轴配置 interval：坐标轴刻度显示间隔，数值表示间隔的数据 开发中需求只展示首尾两个坐标刻度则可以这样写： interval:xData.length-2 //xData为X轴的数据 （2）提示框tooltip 数值自定义单位 formatter tooltip :{ trigger: "axis", formatter:function(params){ 　let relVal = params[0].name+"<br/&gt
ECharts常用配置项学习
Shadow Kylin的博客
01-11 2600
echarts 常用配置项
echarts环形图配置
超级婷
08-24 1906
echarts 环形图
Echarts常用配置项(详细入门)
qq_45796592的博客
02-12 7011
Echarts的简单入门
ECharts配置项.md
04-22
ECharts配置项.md
常用 echarts 的配置
05-26
常用 echarts 的配置
Echarts3配置项手册离线网页版
02-06
完整拷贝官网配置项页面,彻底离线查询各个配置项.........
Echarts-配置项手册.zip
10-24
百度echart4.x版本配置手册离线版本。用于数据可视化，便于数据分析分析展示。PDF格式。
echarts配置项详细解释.pdf
07-13
Echarts配置项详细解释 Echarts是一种基于JavaScript的数据可视化图表库，提供了丰富的配置项来满足不同的图表需求。下面将对Echarts中的x轴配置项进行详细解释： 1. axisLine：坐标轴轴线相关设置 * show：是否...
Day43
最新发布
m0_67496588的博客
06-20 537
JSON，Ajax
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1511
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 357
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 359
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
echarts配置信息
09-10
Echarts是一个基于JavaScript的开源可视化库，用于生成各种交互式图表和地图。要配置Echarts，你需要掌握一些重要的组件和参数。 首先，你可以使用第三方库echarts来开发地图组件，通过registerMap方法注册地图信息，并使用geo组件来配置地图的相关参数。通过这些配置，你可以实现地图的展示、缩放、拖拽等功能。 此外，你还可以使用visualMap视觉映射组件来配置数据的可视化映射，通过设置不同的颜色或大小来表示不同的数据值。这样可以帮助用户更直观地理解数据分布和趋势。 在整理Echarts的配置信息时，你的目的不是记忆所有的配置信息，而是为了更好地查询各项图表配置。整理后，你对配置信息有了整体认识，并将其收录在个人博客上，以便随时查阅。这对你来说可能是一个意外的收获。 综上所述，要配置Echarts图表，你需要熟悉registerMap、geo组件、visualMap视觉映射组件等组件的配置信息。这样你就可以根据具体需求来自定义你的图表，并实现各种交互和数据可视化效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值