EChart简单入门

echart的安装就细不讲了,直接去官网下,实在不会的直接用cdn,省的一番口舌。

cdn.staticfile.net/echarts/4.3.0/echarts.min.js

正入话题哈

什么是EChart?

EChart 是一个使用 JavaScript 实现的开源可视化库,Echart支持多种常见的图表类型,如折线图、柱状图、饼图、散点图等,同时还支持地图的绘制和交互。Echart非常灵活和强大,并且拥有活跃的社区支持,在数据可视化领域广泛应用于各种类型的网站和应用程序中。

一.echart的语法构造搭建

第一步

在写echart之前先引入库(像vue,jq,都类似这样,应该不陌生,有点啰嗦了)

 <script src="cdn或本地位置"></script>

第二步

身体body部分的搭建

1.先创个盒子吧,你想要图表有多大,就创多大,图表就是放置在这个盒子中

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

2.创完盒子之后呢,开始数据部分吧,怎么将数据应用到图表可视化显示出来呢?

先随便创个值例如:myChart,用myChart来上承接入echart,下接入数据,echart.init表示这是个echart表,后面(document.getElementById('main'))是填写数据位置

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

当然这只是创建echart实例的其中一种方法。

创完值 myChart 之后呢,怎么办?

就是具体的数据结构了,让我们来看看。

3.随便创个名字来承接你要的数据,数据打在这个名字里面,哦对,就打在这个里面,例如取个名字叫option来承接数据:

 var option = {
            title: {
                text: '因蓝桥杯摆烂的第无数天'
            },
            tooltip: {},
            legend: {
                data:['销量tmd']
            },
            xAxis: {
                data: ["内裤","胸罩","丝袜","黑丝","白丝","肉丝"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

来我们来看看效果

写完数据之后呢?

最后一步

将更改数据填入中介

myChart.setOption(option);

整体来看看:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="自己研究看开头"></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: '因蓝桥杯摆烂的第无数天'
            },
            tooltip: {},
            legend: {
                data:['销量tmd']
            },
            xAxis: {
                data: ["内裤","胸罩","丝袜","黑丝","白丝","肉丝"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

总结一下:第一步引入库 <script src="cdn或本地位置"></script>

                            第二步创个容器对象 

                                第三步创个承接对象

                                        第四步创个数据对象,填入数据。

                                              第五步 更新数据

                                

                                   五步万能结束,ok了,就这样了。。。。。。。。。。

就再补充点数据方面的知识吧,就是写在数据对象里面的。

二.数据

1.type

type的意思是什么?哦,对,是类型,你先要想好,你要创建的图表是个什么类型。

2.color

color也就是调色盘,想搞什么颜色就搞什么颜色。

调色盘颜色列表。如果没有设置全局颜色,则会依次循环从该列表中取颜色作为系列颜色。

说实话,没啥软用

3.title

也就是标题嘛

看下属性,旁边都有介绍:

 title: {
        text:               //标题名字
        x: 'left',                 // 水平安放位置,默认为左对齐,可选为:
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}(x坐标,单位px)
        y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                                   // 'top' ¦ 'bottom' ¦ 'center'
                                   // ¦ {number}(y坐标,单位px)
        //textAlign: null          // 水平对齐方式,默认根据x设置自动调整
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc',       // 标题边框颜色
        borderWidth: 0,            // 标题边框线宽,单位px,默认为0(无边框)
        padding: 5,                // 标题内边距,单位px,默认各方向内边距为5,
                                   // 接受数组分别设定上右下左边距,同css
        itemGap: 10,               // 主副标题纵向间隔,单位px,默认为10,
        textStyle: {
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#333'          // 主标题文字颜色
        },
        subtextStyle: {
            color: '#aaa'          // 副标题文字颜色
        }
    },

4.legend

翻译过来就是图标比例,像怎么布局啊,边框啊

 
    legend: {
        data:                   //数据显示
        orient: 'horizontal',      // 布局方式,默认为水平布局,可选为:
                                   // 'horizontal' ¦ 'vertical'
        x: 'center',               // 水平安放位置,默认为全图居中,可选为:
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}(x坐标,单位px)
        y: 'top',                  // 垂直安放位置,默认为全图顶端,可选为:
                                   // 'top' ¦ 'bottom' ¦ 'center'
                                   // ¦ {number}(y坐标,单位px)
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc',       // 图例边框颜色
        borderWidth: 0,            // 图例边框线宽,单位px,默认为0(无边框)
        padding: 5,                // 图例内边距,单位px,默认各方向内边距为5,
                                   // 接受数组分别设定上右下左边距,同css
        itemGap: 10,               // 各个item之间的间隔,单位px,默认为10,
                                   // 横向布局时为水平间隔,纵向布局时为纵向间隔
        itemWidth: 20,             // 图例图形宽度
        itemHeight: 14,            // 图例图形高度
        textStyle: {
            color: '#333'          // 图例文字颜色
        }
    },

5.....睡觉

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=2d7pomchhfr4g

  • 41
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论
Vue是一种流行的JavaScript框架,用于构建现代化的Web应用程序。ECharts是一个基于JavaScript的开源可视化图表库,它可以用来展示各种类型的数据。Vue和ECharts可以很好地结合使用,以实现动态数据可视化。 在Vue中使用ECharts,您需要先安装ECharts库并将其引入到您的Vue项目中。然后,您可以在Vue组件中创建一个ECharts实例,然后使用ECharts API来设置和配置图表。 以下是引入ECharts的一些步骤: 1. 安装ECharts库,可以使用npm或yarn来安装。 2. 在您的Vue项目中引入ECharts库。您可以在main.js文件中添加以下代码: ``` import echarts from 'echarts' Vue.prototype.$echarts = echarts ``` 3. 在您的Vue组件中创建一个ECharts实例,并使用ECharts API来配置和设置图表。以下是一个简单的例子: ``` <template> <div id="chart" style="width: 100%; height: 300px;"></div> </template> <script> export default { mounted () { this.initChart() }, methods: { initChart () { const chartDom = document.getElementById('chart') const myChart = this.$echarts.init(chartDom) myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20, 5] }] }) } } } </script> ``` 在上面的例子中,我们首先在template标签中定义了一个div元素,用于渲染ECharts图表。然后,在mounted生命周期方法中,我们调用了initChart方法来创建ECharts实例,并使用setOption方法来设置和配置图表。最终,我们将图表渲染到了页面上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Insecure Fluoxetine

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值