文档章节

echarts 使用方法

超神的小橘子
 超神的小橘子
发布于 2017/07/04 18:02
字数 551
阅读 24
收藏 0

使用echarts首先要下载依赖包,在http://echarts.baidu.com/ 中选择下载,在页面中选择要下载的文件,如果不满足需要也可在最下方选择在线定制,选择需要的内容进行下载。

我用的是一次全部引用的方法。

在页面最开始引用刚才下载的包(我的包在Content/js/文件夹下)

 <script src="~/Content/js/echarts.js" type="text/javascript"></script>

 

html里面给一个div显示图片

<div id="bar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>

 

然后就是画图了,我是把画图写在函数里面,调用即可。

function chart01(i, j, k, l, m) {
        // 柱状图数据
        var xinghao = [];
        var cjbaojing = [];
        var zjbaojing = [];
        var gjbaojing = [];
        var timebaojing = [];
        xinghao = i;
        cjbaojing = j;
        zjbaojing = k;
        gjbaojing = l;
        timebaojing = m;
        //用于存放图表上的数据

        var myChart = echarts.init(document.getElementById('bar',theme));//容器对象,初始化接口、图表所在节点
            

        var option = {       //设置图标参数,这些参数在echarts官网上有不同图形的不同option,可根据需                                        //要修改
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                        type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['初级报警', '中级报警', '高级报警', '时间报警']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'value'
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: xinghao  //这里用的数组存放数据,直接写数组名即可
                    }
                ],
                series: [
                    {
                        name: '初级报警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight'} } },
                        data: cjbaojing,    //这里用的数组存放数据,直接写数组名即可
                        barWidth: 30,       //柱图宽度
                    },
                    {
                        name: '中级报警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
                        data: zjbaojing,   //这里用的数组存放数据,直接写数组名即可
                        barWidth: 30,       //柱图宽度
                    },
                    {
                        name: '高级报警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
                        data: gjbaojing,    //这里用的数组存放数据,直接写数组名即可
                        barWidth: 30,       //柱图宽度
                    },
                    {
                        name: '时间报警',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
                        data: timebaojing,   //这里用的数组存放数据,直接写数组名即可
                        barWidth : 30,       //柱图宽度
                    }
                ]
            };
            myChart.setOption(option);

        }

下面是效果图,里面的标签是下载包的时候可选的。

 

© 著作权归作者所有

超神的小橘子
粉丝 1
博文 43
码字总数 1875
作品 0
太原
私信 提问
响应式 React Native Echarts 组件

一种在 React Native 中封装的响应式 Echarts 组件,使用与示例请参见:react-native-echarts-demo 近年来,随着移动端对数据可视化的要求越来越高,类似 MPAndroidChart 这样的传统图表库已...

entronad
2018/07/12
0
0
D3.js与echart.js的应用场景

什么是D3? D3.js的全称是Data-Driven Documents,其实就是一个数据驱动的文档的js库,简而言之就是一个数据可视化的库。那什么是数据可视化呢?举个例子: 给出一组数据 [10,80,40,100,30...

Nomad_Lau
05/11
0
0
详解在vue中使用echarts图表实例代码

安装vue依赖 使用npm 使用yarn 使用国内的淘宝镜像: 引入ECharts 安装好的ECharts会放在node_modules目录下。 全部引入 1.直接在项目代码引入 可以直接在项目代码中 得到 ECharts。声明一个...

peakedness丶
2018/12/24
334
0
"echarts/util/mapData/params" is not exists!

@Kener-林峰 你好,想跟你请教个问题: Error: [MODULE_MISS]"echarts/util/mapData/params" is not exists! 请问为什么拓展地图的时候报这个错误!在这前面已经进行了 var fileLocation = '......

黄平
2014/03/31
6.1K
1
Echarts-百度地图省分着色

通过Echarts3结合百度地图,对全国省分进行着色。 起因 由于Echarts3中,不再使用china.js文件: ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目...

莫显辉
2018/05/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
26分钟前
5
0
wildfly(JBoss AS)应用服务器快速入门

什么是wildfly JBoss AS 从8版本起名为wildfly。Wildfly是一个开源的基于JavaEE的轻量级应用服务器。可以在任何商业应用中免费使用。 WildFly是一个灵活的、轻量的、强大管理能力的应用程序服...

程序新视界
50分钟前
4
0
Java集合类常见面试知识点总结

Java集合类学习总结 这篇总结是基于之前博客内容的一个整理和回顾。 这里先简单地总结一下,更多详细内容请参考我的专栏:深入浅出Java核心技术 https://blog.csdn.net/column/details/21930...

Java技术江湖
53分钟前
6
0
怎么用for循环打出爱心

先上效果图: 这是用*组成的爱心,下面讲讲思路: 首先这个图形可以拆分成三部分:第一部分是上面三行的两个梯形,第二部分是中间三行的长方形,第三部分是最下面的倒三角形。 其实图形拆分好...

INEVITABLE
59分钟前
4
0
用HttpUrlConnection伪造成HttpClient

https://www.jianshu.com/p/27ad06cc39d2

shzwork
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部