关于echarts你因该知道的事

最新推荐文章于 2024-06-03 11:06:44 发布

对面_阿紫

最新推荐文章于 2024-06-03 11:06:44 发布

阅读量614

点赞数 1

文章标签： php perl mysql

本文链接：https://blog.csdn.net/m0_49707537/article/details/121664996

版权

名词解释

chart：

是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等

axis

直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型

xAxis

直角坐标系中的横轴，通常并默认为类目型

yAxis

直角坐标系中的纵轴，通常并默认为数值型

legend

图例，表述数据和图形的关联

toolbox

辅助工具箱，辅助功能，如添加标线，框选缩放等

tooltip

气泡提示框，常用于展现更详细的数据

series

数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据

line

折线图，堆积折线图，区域图，堆积区域图。

bar

柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。

pie

饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。

实例展示

如果单独在html页面写，则可以参考如下代码：
记得引入echarts.min.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #container{
        width: 800px;
        height: 600px;
    }
    
</style>
<body>
    <div id="container">

    </div>
    <script src="../js/purple-passion.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script>
        // 01 修改主题，dark light 自定义
        // 02 修改调色盘
        // 初始化echart实例
        var echart=echarts.init(document.getElementById("container"),'purple-passion')
        // 定义选项
        var option= {
            // color调色盘，可局部，可全局
            // color:["#8a7ca8","#e098c7","#cceffa"],
            
            // 标题
            title:{text:"前端大讲堂"},
            // 鼠标提示
            tooltip:{},
            // 图例
            legend:{data:["人数","人气","年龄分布"]},
            // x轴线
            xAxis:{data:["12-1","12-2","12-3","12-4","12-5","12-6"]},
             // y轴线
             yAxis:{},
            //  系列数据
            series:[
                // 名称name,类型：柱状图，数据data,areaStyle:{color:#F70} 面积区域
                {name:"人数",type:"bar",data:[100,500,600,1000,500,900]},
                {name:"人气",type:"line",smooth:true,data:[60,300,400,800,100,700]},
                {name:"年龄分布",type:"pie",radius:["20%","40%"],left:"70%",top:"-80%",
                data:[
                    {name:"青年",value:36},
                    {name:"中年",value:27},
                    {name:"老年",value:18},
                    {name:"少年",value:32},
            ]}
            ]
        }
        // 设置参数
        echart.setOption(option)
    </script>
</body>
</html>

如果你想在vue里引用echarts，按照如下几步即可：
1.通过 npm 命令在自己的项目目录下安装 ECharts
npm install echarts --save
2.在main.js里引入

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

Vue.prototype.$echarts = echarts

在这里插入图片描述
3.文件初始化，重点，圈住的部分是vue区别于在html里写echarts的不同

var echart = this.$echarts.init(document.getElementById("container"), "dark");

在这里插入图片描述

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 800px;
  height: 600px;
}
</style>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    first() {
      var echart = this.$echarts.init(
        document.getElementById("container"),
        "dark"
      );
      var option = {
        title: { text: "人气" },
        tooltip: {},
        legend: { data: ["人数"] },
        xAxis: {
          type: "category",
          data: ["12-1", "12-2", "12-3", "12-4", "12-5"]
        },
        yAxis: {},
        // 系列数据
        series:[
          // name 名称，类型，柱状图，数据data
          {name:"人数",type:"bar",data:[100,80,120,60,130]}
        ]
      };
      echart.setOption(option);
    }
  },
  mounted() {
    this.first();
  }
};
</script>

对面_阿紫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
关于echarts你因该知道的事

名词解释chart：是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等axis直角坐标系中的一个坐标轴，坐标轴可分为类目型、数值型或时间型xAxis直角坐标系中的横轴，通常并默认为类目型yAxis直角坐标系中的纵轴，通常并默认为数值型legend图例，表述数据和图形的关联toolbox辅助工具箱，辅助功能，如添加标线，框选缩放等tooltip气泡提示框，常用于展现更详细的数据series数据系列，一个图表可能包含多个
复制链接

扫一扫