美文网首页程序员
三步使用ECharts

三步使用ECharts

作者: Cherry9507 | 来源:发表于2017-10-10 10:59 被阅读0次

最近闲来无事,把一直想学的eahrts简单看了一下,显然官网教程步骤已经很详细,但我习惯把他的东西用自己习惯的方法记下来,以后打开直接复制粘贴自己的文章也省事儿。

实例样图:

image.png

话不多说,直接引插件:

1.直接用cdn引入

<script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.min.js"></script>

2.给图标一个容器,习惯div

/*css样式也给上*/
<style>
        #echarts_container{
            width: 500px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding-top: 30px;
        }
        h1{
            text-align: center;
            color: #666;
        }
</style>


<div id="echarts_container" ></div>

3.初始化一个echatrs

// 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts_container'));
// 指定图表的配置项和数据
     var option = {
            title: {
                text: 'ECharts柱状示意图',
                left:50
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['销量','价格'],
                left:55,
                top:370,
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [
               {
                  name: '销量',
                  type: 'line',
                  smooth: true,
                  data: [5, 10, 22, 46, 36, 29]
               },
               {
                  name: '价格',
                  type: 'line',
                  smooth: true,
                  data: [11, 22, 39, 66, 50, 40]
              },            
            ]
        };

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

本实例是折线图

简单介绍几个配置项:

  • series里的type可以更改图表样式:line(折线),pie(饼状图),map(地图,配合映射组件visualMap:[]使用),scatter(散点),bar(柱状图)...
  • toolbox:工具栏,内置有导出图片数据视图动态类型切换数据区域缩放重置五个工具。(下图右上角)
image.png
  • timeline 组件,提供了在多个 ECharts option 间进行切换、播放等操作的功能。
  • title:标题组件,包含主标题和副标题。
  • legend:图例组件。
    更多配置参考:http://echarts.baidu.com/option.html#toolbox

文章会持续更新,一起进步。 如果本文对你有帮助,欢迎点赞~

相关文章

  • 三步使用ECharts

    最近闲来无事,把一直想学的eahrts简单看了一下,显然官网教程步骤已经很详细,但我习惯把他的东西用自己习惯的方法...

  • ECharts - 数据图表的使用

    欢迎移步我的博客阅读:《ECharts - 数据图表的使用》 关于ECharts(ECharts) ECharts...

  • 分享学习:小程序使用Echarts的方法

    echarts的使用 前排提醒:有echarts基础会容易看懂 使用到echarts微信版 地址: https:/...

  • echarts的双y轴显示

    第一步: 引入echarts 第二步: id绑定 第三步: 配置options,创建echarts实例 创建ele...

  • Echarts

    第一步:下载echarts 第二步:在main.js中全局引入 第三步:在对应的组件当中使用

  • echarts—echarts的简单应用

    一、什么是echarts echarts是一个使用JavaScript实现的开源可视化库。可以使用echarts制...

  • 今日知识汇总

    简单使用了ECharts. 先定义一个区域,设置ID和宽高,引入echarts.js,使用echarts.init...

  • Echarts颜色渐变

    在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.g...

  • vue项目中配置ECharts

    目录 介绍 5 分钟上手 echarts echarts 基础配置 在 vue 项目中使用 echarts (一)...

  • vue使用echarts画省份地图

    vue中使用echarts画省份地图 1.安装echarts 2.引入echarts 示例

网友评论

    本文标题:三步使用ECharts

    本文链接:https://www.haomeiwen.com/subject/qvtvyxtx.html