ECharts使用小笔记

简介: #ECharts 做图标的。1分钟上手1.引入 ECharts 2.绘制一个简单的图表 建立一个有高度的容器 3.然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。

这里写图片描述#ECharts
做图标的。

1分钟上手

1.引入 ECharts

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

2.绘制一个简单的图表 建立一个有高度的容器

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

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

“`

ECharts




x轴设置

xAxis: [{
            type: 'category',
            data: data,
            splitLine: {
                show: false//
            },

            axisLine: {
                show: false

            },
            axisLabel: {
                formatter: function(value) {
                    return value.split("").join("\n"); //文字垂直显示
                }
            },
            axisTick: {
                show: false
            }
        }],
相关文章
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-echarts柱状图实现2
前端学习笔记202305学习笔记第二十二天-echarts柱状图实现2
44 0
|
10月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-echarts地图绘制2
前端学习笔记202305学习笔记第二十三天-echarts地图绘制2
53 0
|
11月前
|
前端开发 数据可视化 JavaScript
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
91 0
|
9月前
|
JSON 数据格式
Echarts笔记
之前在后台已经把数据全部获取好了,也封装位Json格式,但是到前台饼图上却无法显示,原因是传到页面的是一个List集合,无法一个一个的分配给相应的模块(柱形图可以自动显示),最后在前台进行遍历,就能显示了。
50 0
|
11月前
|
开发框架 JSON 数据可视化
Python Flask Echarts数据可视化图表实战晋级笔记(1)HTML页面渲染与参数传递
Python Flask Echarts数据可视化图表实战晋级笔记(1)HTML页面渲染与参数传递
177 1
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-echarts柱状图实现2
前端学习笔记202305学习笔记第二十二天-echarts柱状图实现2
34 0
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-echarts柱状图实现2
前端学习笔记202305学习笔记第二十二天-echarts柱状图实现2
39 0
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-echarts折线图实现1
前端学习笔记202305学习笔记第二十二天-echarts折线图实现1
64 0
|
10月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-echarts折线图实现2
前端学习笔记202305学习笔记第二十二天-echarts折线图实现2
56 0
|
10月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-echarts地图绘制
前端学习笔记202305学习笔记第二十三天-echarts地图绘制
52 0