1、首先打开任一浏览器,找到echarts的API文档中的“配置项”,展开“series”,type=line的就是折线图,此处可以看到折线图的各种设置项与允许的值。
2、打开echarts实例,点击折线图分类,找到并点击最基础的折线图。
3、打开的基础折线图的配置项和运行效果。修改左侧的series配置项,给折线图设置拐点大小为15。
4、点击【运行】按钮,右侧就可以看到拐点图形变大了 symbolSize:15。
5、最后给折线图的拐点图形修改为三角形,修改后,运行,就可以看到图形变成了三角形 symbol:"triangle"。
Echarts使用有很多方式,这里我来说在 webpack 中使用 ECharts...
2.引入 ECharts
可以直接在项目中引用,这里是在main,js引用
3.直接使用
这样简单的一个图表就成功了 如下图:
下面直接奔入主题,对于一些公司的业务需要与图表打交道,比如大数据可视化平台,echarts就可以完美胜任了。
但是对于刚接触echarts的或者是不经常用的朋友,虽说简单好用 但是去改变echarts图表的样式还是很费时的。
毕竟官网的实例与公司业务或者UI的设计有些出入。。这样就需要改里面的参数了。
下面是我用到的图表总结的一些参数设置,我就不一一手写解释了,直接用图来展现出来
今天先整理到这里,后期增加关系图、仪表盘、散点图 以及我们的大地图......
整理地图相关参数:
①②③④
JSON引入方式
地图属性设置都会在geo对象中设置相应参数,下面介绍常用参数:
地图上的内容主要在serise中设置,
echarts控制圆饼图的大小代码及方法如下:
1、新建静态页面pie.html,并引入echarts核心js文件。
2、在<body></body>元素内插入div饼图容器,设置其宽度和高度。
3、编写生成饼图图形的核心代码,有数据源和样式。
4、预览该静态页面,查看饼图效果,分别点击饼图块。
5、添加饼图块图例切换事件,并打印出饼图参数,更改参数值即可实现圆饼图大小的控制。
6、再次预览该界面,可以查看到饼图效果,并点击饼图分块。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)