echarts的具体使用

安装

npm install echarts --save

使用

1.引入echarts

import * as echarts from 'echarts';

2.基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

项目中通过ref="xx"标记标签，var myChart = echarts.init($refs.xx，主题);

3.设置配置项，绘制图表

let option={配置项}

myChart.setOption(option);

配置项

title:{} 主标题

tooltip:{} 鼠标悬停提示文字，里面的可以配置自定义提示文字

legend:{} 设置图例

xAxis:{} 配置x轴参数 type设置value数据轴 category类目轴

yAxis:{} 配置y轴参数 type设置value数据轴 category类目轴

series:[]系列 设置图表类型（数据的堆叠需要设置stack同类型的数据需要匹配相同的stack）

grid:{}设置整个echarts图表位置，边框，背景色等样式

dataset:{}排序

内置主题——light,dark

自定义主题——下载主题JSON版本，直接复制，在项目assets里新建js文件，设置一个变量并暴露出去，将复制的json数据复制过来赋值给变量

在需要用到的组件里导入js文件中的变量，直接将引入的变量放在主题处使用即可

阀门设置

阈值

柱状图基本配置

<template>
  <div
    ref="aa"
    style="width: 400px; height: 400px; border: 2px solid red"
  ></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const aa = ref();
onMounted(() => {
  let myChart = echarts.init(aa.value);
  let xData=['美食','数码','日化','蔬菜']
  let yData=[34,54,24,66]
  let option = {
    title:{
        text:"柱状图"
    },
    xAxis:{
        data:xData,//x轴展示数据
        type:"category",//设置坐标轴类型 category为类目轴 value为数据轴
    },
    yAxis:{
        
    },
    series:[{
        type:'bar',//图表类型为柱状图
        data:yData,//数值
        // 最大值最小值设置
        markPoint:{
            data:[
                {
                    type:"max",
                    name:"最大值",
                },
                {
                    type:"min",
                    name:"最小值",
                },
                
            ]
        },
        // 图表的标线
        markLine:{
            data:[
                {
                    type:"average",
                    name:"平均值"
                }
            ]
        },
        // 单独设置每个轴的样式
        itemStyle:{
            normal:{
                color:function(params){
                    let colorList=[
                        "#c24532",
                        "#2f4554",
                        "#98c234",
                        "#43546e"
                    ]
                    return colorList[params.dataIndex]
                }
            }
        },
    }]
  };
  myChart.setOption(option)