Echarts的基本使用

最新推荐文章于 2023-08-02 15:02:57 发布

sgxmr

最新推荐文章于 2023-08-02 15:02:57 发布

阅读量1.2k

点赞数

分类专栏：可视化文章标签： kafka zookeeper 分布式

本文链接：https://blog.csdn.net/weixin_46155444/article/details/113983412

版权

可视化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

Echarts应用

官方中文网址：https://www.echartsjs.com/zh/index.html

基本上看官方网站就可以学会

Echarts示例

1.引入Echarts

下载:https://echarts.apache.org/zh/download.html

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>

2、绘制一个简单的柱状图

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

**var myChart = echarts.init(document.getElementById(‘id名’));**必须记住

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
  
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

组件介绍

核心

主要由dom，instance，option三部分组成

dom得到一个空间

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

用echarts.init(dom)得到instance

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

在option中补充数据，标题，数据等

显示图表

instance.setOption(option);

用 option 描述图表

上面已经出现了 option 这个概念。echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为

可以在官网的配置项中搜索，不懂的内容，以了解参数的用途

常用图表

柱状图

<div id="main1" style="width: 800px;height: 600px"></div>
<script>
        var mychart = echarts.init(document.getElementById('main1'));
        var option = {
            color:['rgb(207,65,48)'],
            title:{
                text:'各类产品的消费情况',
                subtext: '柱状图',
                left: 'center'
            },
             tooltip:{
              trigger:'axis',
              axisPointer:{
                  type: 'shadow'
              }
            },

            xAxis:{
                type:'category',
                axisLabel:{
                    rotate:30,
                    interval:0
                },
                data:[
                   /* {% for a in saless %}
                        "{{ a.cplx }}",
                    {% endfor %}*/
                  'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
                ]
            },
            yAxis:{
                type: 'value'
            },
            series:{
                type: 'bar',
                barWidth:'60%',
              //上面显示值
                label: {
                show: true,
                position: 'top'
                },
                data:[
                    /*{% for b in saless %}
                        {{ b.num }},
                    {% endfor %}*/
                  120, 200, 150, 80, 70, 110, 130
                ]
            },
        };
        mychart.setOption(option);
    </script>

饼状图

<div id="main2" style="width: 800px;height: 600px"></div>
<script>
{#    根据consumption表绘各类会员卡的消费总金额（饼图）
{#			具体要求，标题为：“各类会员卡的消费总金额”
{#					 副标题：“（-饼图）”
{#					 标题位置为中间，
{#					 显示图例，
{#					 设置动态显示（将鼠标放到饼图的某一块上会显示这一块的占比，类似于“（10%）”）这种效果#}
    var mychart2 = echarts.init(document.getElementById('main2'));
    var option2 = {
        title: {
        text:'天气情况统计',
        subtext:'虚构数据',
        left:'center'
        },
      //显示比例
        tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
         },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
       data: ['西凉', '益州', '兖州', '荆州', '幽州']

        },
        series: [
            {
                type:'pie',
                radius:'60%',
                center:['50%','60%'],
                data:[
                  /*  {% for i in consumptions %}
                    {value: {{ i.xfzje }},name:"{{ i.klxmc }}"},
                    {% endfor %}*/
                 {value: 535, name: '荆州'},
                {value: 510, name: '兖州'},
                {value: 634, name: '益州'},
                {value: 735, name: '西凉'}
                 {value: 1548, name: '幽州'}
                ],
             emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]

    };
    mychart2.setOption(option2)

</script>

折线图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/echarts.js"></script>
</head>
<body>
<div id="main1" style="width: 800px;height: 600px"></div>
<script>
        var mychart = echarts.init(document.getElementById('main1'));
        var option = {
            title:{
                text:'品牌折线图',
                left:'center'
            },
            tooltip: {
                show: true
            },
         backgroundColor: '#F7F7F7',
        xAxis: {
        type: 'category',
       /* data: [
            {% for a in brands %}
                        "{{ a.sbmc }}",
                    {% endfor %}
        ]*/
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         },
        yAxis: {
            type: 'value'
        },
        series: [{
           /* data: [
               {% for a in brands %}
                        {{ a.num }},
                    {% endfor %}
            ]*/
           data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
    }]
        };
        mychart.setOption(option);
    </script>
</body>
</html>

词云图

<div id="main3" style="width: 800px;height: 600px"></div>
<!-- 使用echarts.js以及echarts-wordcloud.js，对前端传来的数据遍历接收，然后进行数据可视化 -->
    <script type="text/javascript">
        var mychart3 = echarts.init(document.getElementById("main3"));

        var option3={
            tooltip: {
                show: true
            },
         backgroundColor: '#F7F7F7',
            title:{
                text:'销售情况最好的前20种品牌',
                left:'center'
            },
            series:[{
//要绘制的“云”的形状。可以是表示为//回调函数的任何极性方程式，也可以是关键字。可用的礼物是圆（默认），
// 心形（苹果或心脏形状曲线，最著名的极坐标方程），菱形（正方形的//别名），三角形进，三角形，（
// 三角形直立，五边形，和星形的别名。

        // The shape of the "cloud" to draw. Can be any polar equation represented as a
        // callback function, or a keyword present. Available presents are circle (default),
        // cardioid (apple or heart shape curve, the most known polar equation), diamond (
        // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
                name:'品牌词云图',
                type:'wordCloud',
                shape:'circle',
        //跟随左/上/下/宽/高/右/下的位置来定位词云
        //默认设置在中间尺寸为75％x 80％。
                left: 'center',
                top: 'center',
                width: '50%',
                height: '50%',
                right: null,
                bottom: null,

        //文本大小范围，数据中的值将被映射到该范围。
        //默认为最小12像素，最大60像素。
                sizeRange: [12, 60],

//文字旋转范围和程度步骤。文本将随机在范围[-90，90]通过rotationStep 45旋转
                 rotationRange: [-90, 90],
                 rotationStep: 45,
                //在像素网格的尺寸用于标记画布的可用性
        //网格大小越大，单词之间的间距越大。
                  gridSize: 8,
                 //设置为true以允许部分在画布外部绘制单词。
        //允许绘制 大于画布大小的单词
                 drawOutOfBound: false,
                 //如果执行布局动画。
        //注意禁用它会在有很多单词时导致UI阻塞。
                 layoutAnimation: true,
                //全局文本样式
         textStyle: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            //颜色可以是一个回调函数或一个颜色字符串
            color: function () {
                //随机颜色
                return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                ].join(',') + ')';
            }
        },
        emphasis: {
            focus: 'self',
            textStyle: {
                shadowBlur: 10,
                shadowColor: '#333'
            }

        },
             //数据是一个数组。每个数组项必须具有name和value属性。
               /*data: [
                   {% for ci in brands %}
                   {name: "{{ ci.sbmc }}", value: {{ ci.num }}},
                   {% endfor %}
               ],*/
              data:[
                {
            "name": "花鸟市场",
            "value": 1446
        },
        {
            "name": "汽车",
            "value": 928
        },
        {
            "name": "视频",
            "value": 906
        },
        {
            "name": "电视",
            "value": 825
        },
        {
            "name": "Lover Boy 88",
            "value": 514
        },
        {
            "name": "动漫",
            "value": 486
        },
        {
            "name": "音乐",
            "value": 5999
        },
        {
            "name": "直播",
            "value": 163
        },
        {
            "name": "广播电台",
            "value": 86
        },
        {
            "name": "戏曲曲艺",
            "value": 17
        },
        {
            "name": "演出票务",
            "value": 6
        },
        {
            "name": "给陌生的你听",
            "value": 1
        },
        {
            "name": "资讯",
            "value": 1437
        },
        {
            "name": "商业财经",
            "value": 422
        },
        {
            "name": "娱乐八卦",
            "value": 353
        },
        {
            "name": "军事",
            "value": 331
        },
        {
            "name": "科技资讯",
            "value": 313
        },
        {
            "name": "社会时政",
            "value": 307
        }
              ]

 // 数据是一个数组。每个数组项必须具有name和value属性。
     /*   data: [{
            name: 'Farrah Abraham',
            value: 366,
            //单个文本的样式
            textStyle: {
            }
        }]  */

            }]
        };

        mychart3.setOption(option3);
    </script>