Echarts 自学笔记

SoI_

于 2023-05-24 20:45:02 发布

阅读量116

点赞数

分类专栏： Echarts 文章标签： echarts

本文链接：https://blog.csdn.net/m0_74062159/article/details/130855139

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该文展示了如何使用ECharts库创建一个柱状图。首先设置一个DOM容器，然后引入echarts.min.js，接着初始化ECharts实例，准备并设置配置项，包括图表类型、数据、图例和提示信息等，最后调用setOption方法显示图表。

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

<!--             五步
    1、设置一个带宽高的容器：div
    2、引入echart.js：在script标签中的 scr属性，且外部引入script标签会无视俩script之间的内容，只有scr有效，且sript放在/body上
    3、初始化 echarts
    4、准备配置项 let option = {}    
    5、设置配置项：myChart.setOption(option);

-->

<!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>入门示例</title>
</head>
<body>
     <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
    <script src="./echarts.min.js"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
    // 此处的myChart是script引入的对象，不然用不了，get不到
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: 'ECharts 入门示例',
    textStyle:{
        color:'yellowgreen',
        fontSize:'20px'
    }
  },
  //鼠标在bar上就显示信息
  tooltip: {
    show:true ,//默认位true
    // trigger:'axis'
    trgger: 'item'
  },
//什么颜色对应什么数据  图外说明
  legend: {
    //data 默认为 name
    data: ['销量'] ['价格'],
    bottom :'10px'
  },
  //一般data的数量与serise中的data一致，即x坐标有几个，值为多少
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  //有几组数据{}，数据中{}的各项属性细分
  series: [
    {
      name: '销量',//图例对应的名字
      type: 'bar',//柱状图bar  线状图line
      data: [35, 42, 65, 100, 130, 220]
    },
    {
      name: '价格',//图例对应的名字
      type: 'bar',//柱状图bar  线状图line
      data: [35, 200, 360, 100, 510, 320]
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

    </script>

</body>
</html>