比较好的echart案例

最新推荐文章于 2024-03-12 16:50:46 发布

明阳mark

最新推荐文章于 2024-03-12 16:50:46 发布

阅读量289

点赞数

分类专栏： echat

本文链接：https://blog.csdn.net/qq_36939013/article/details/107186672

版权

本文介绍了使用ECharts库创建的高质量图表案例，包括清晰易读的指标柱状图和直观的仪表盘展示，帮助读者理解如何在项目中有效运用ECharts进行数据可视化。

摘要由CSDN通过智能技术生成

指标柱状图

在这里插入图片描述

 <v-chart
    :options="option1"
    :autoresize="true"
    style="width: 95%;height: 100%;"
/>

option1 = {
   
     color: ["#079AEF"],
     tooltip: {
   
         trigger: "axis",
         axisPointer: {
   
             type: "line",
             lineStyle: {
   
                 color: "rgba(50,243,255,1)",
                 width: 2,
                 type: "dashed"
             }
         },
         backgroundColor: "rgba(16,75,136,.5)",
         borderColor: "rgba(50,243,255,1)",
         borderWidth: 1
     },
     grid: {
   
         left: "5%",
         right: "4%",
         top: "4%",
         bottom: "20%",
         containLabel: true
     },
     xAxis: {
   
         type: "value",
         boundaryGap: [0, 0.01],
         nameTextStyle: {
   
             color: "#fff",
             fontSize: 12
         }, //坐标轴名称的文字样式。
         axisLine: {
   
             //坐标轴轴线相关设置
             show: true,
             lineStyle