echarts的安装与基本使用

1、通过npm install echarts --save安装。

npm install echarts --save

2、创建一个带有宽高的盒子。

<div id="main" style="width: 100%; height: 400px"></div>

3、在组件中全局引入 。

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

4、在组件中使用模板（如柱状图）

<script setup lang="ts">
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
  onEcharts();
});
function onEcharts() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("main"));
  // 指定图表的配置项和数据
  var option = {
    // 标题
    title: {
      text: "巡查上报记录数量",
      //   标题样式
      textStyle: {
        fontSize: 18,
        color: "#FFFFFF", // 主标题文字颜色
      },
    },
    // 提示信息
    tooltip: {},
    // 包括了坐标轴标签在内的所有内容所形成的矩形的位置。作用可以用来使坐标轴文字完全显示出来
    grid: {
      containLabel: true,
      bottom: "5%",
    },
    // x轴
    xAxis: {
      // 数据类型
      type: "value",
      //坐标轴刻度标签的相关设置
      axisLabel: {
        color: "#fff",
      },
    },
    // y轴
    yAxis: {
      // 类目类型
      type: "category",
      //坐标轴刻度标签的相关设置
      axisLabel: {
        color: "#fff", //x轴文字颜色
      },
      data: ["交通事故", "路面", "桥面", "日常养护", "路基", "交安设施"],
    },
    // 系列列表（用来设置柱状图）
    series: [
      {
        name: "数量",
        // 柱状图bar
        type: "bar",
        data: [
          {
            value: 5,
            // 设置单个柱子的样式
            itemStyle: {
              color: "#f0768b",
            },
          },
          {
            value: 5,
            // 设置单个柱子的样式
            itemStyle: {
              color: "#91cc75",
            },
          },
          {
            value: 20,
            // 设置单个柱子的样式
            itemStyle: {
              color: "#f0768b",
            },
          },
          {
            value: 16,
            // 设置单个柱子的样式
            itemStyle: {
              color: "#91cc75",
            },
          },
          {
            value: 10,
            // 设置单个柱子的样式
            itemStyle: {
              color: "#f0768b",
            },
          },
          {
            value: 10,
            // 设置单个柱子的样式
            itemStyle: {
              color: "#91cc75",
            },
          },
          {
            value: 20,
            // 设置单个柱子的样式
            itemStyle: {
              color: "#f0768b",
            },
          },
        ],
      },
      // {
      //   name: "数量",
      //   // 柱状图bar
      //   type: "line",
      //   data: [5,5,20,16,10,10,20],
      // },
    ],
    // 工具栏
    toolbox: {
      // 是否显示
      show: true,
      //   工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
      itemGap: 4,
      iconStyle: {
        // 工具栏边框颜色
        borderColor: "#fff",
      },
      //   工具栏配置项
      feature: {
        // 区域缩放
        dataZoom: {
          yAxisIndex: "none",
          title: {
            //缩放和还原的标题文本
            zoom: "区域缩放",
            back: "区域缩放还原",
          },
        },
        // 动态类型切换
        magicType: {
          type: ["line", "bar"],
          title: {
            line: "切换为折线图",
            bar: "切换为柱状图",
          },
        },
        // 配置项还原(刷新)
        restore: {
          title: "配置项还原",
        },
        // 保存为图片
        saveAsImage: {
          title: "保存为图片",
        },
      },
    },
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>

5、效果图。

注：相关属性可查看echarts的文档配置项手册。

6、配置项介绍。

// 标题
title: {
  text: "巡查上报记录数量",
   link:'http://www.baidu.com',//超链接
   target:'self',//超链接打开方式，当前页self
   backgroundColor:'pink',//背景色
   borderColor:'pink',//边框色
   borderWidth:5,//边框粗细
   x:'center',//水平居中
   subtext：'副标题',
   sublink:'http://www.baidu.com',//副标题超链接
   //主标题文字样式
   textStyle: {
     fontSize: 18,//文字大小
     color: "#FFFFFF", // 主标题文字颜色
   },
   //副标题文字样式
   subtextStyle: {
     fontSize: 18,//文字大小
     color: "#FFFFFF", // 主标题文字颜色
   },
},

// 提示信息
tooltip: {
    trigger:'axis',//触发类型，默认是item图形触发，axis是坐标轴触发
    //坐标轴指示器
    axisPointer:{
       type:'shadow' //shadow阴影效果 line实线 cross 十字准星
    },
    showContent:false,//提示悬浮框是否显示
    backgroundColor:'pink',//悬浮框背景色
    //自定义提示框信息
    formatter(re){
        console.log(re)
        for(let i ,i<=re.length,i++){
            return '数量:'+re.data.value
        }
    }
},

//图例
legend:{
    show:true,//设置图例的显示与隐藏
    icon:'circle',图例形状设置，这里是圆形
    top:'10%',//图例位置设置，通过方位名词设置
    itemWidth:10,//图例宽度
    itemHeight:20,//图例高度
    textStyle:{//文字样式设置
        color:'pink',
    }
}

//柱状图
series:[
    type: "bar",
    //设置柱状图宽度
    barWidth:20,
    //设置全部轴颜色
    color:'pink',
    //单独设置每个轴的颜色
    itemStyle:{
        normal:{
            color:function (params){
                let colorList = [
                    'pink',
                    'red',
                    '#c23531',
                    '#c23532',
                ]
                return colorList[parmas.dataIndex]
            }
        }
    },
//设置最大值最小值
    markPoint:{
        data:[
            {
                type:'max',
                name:'最大值'
            },
            {
                type:'min',
                name:'最小值'
            }
        ]
    },
    markLine:{
        data:[
            {
                type:'average',
                name:'平均值'
            }
        ]
    }
]

//饼状图
legend:{
        left:'left',
        //图例的布局朝向
        orient:'verical'
}
series:[
    type: "pie",
    

]