echarts-折线图(折线虚实/颜色与拐点样式修改)

效果图如下图所示

echarts-折线图(折线虚实/颜色与拐点样式修改)_第1张图片

1.绘制一个图表时,需要有一个给定宽高的容器;基本配置可以阅读echarts的文档;里面有很多示例demo~~

html 结构:

css样式:


js:

1. 首先需要引入echarts.js 的文件;可从echarts官网中按需要进行下载,链接:http://echarts.baidu.com/download.html

2.  如下为js代码;可以根据注释来理解;

其中有几个点也是通过查阅文档与百度所得,仅此记录,方便以后查阅与完善。

(1). 设置折线的虚实,不同折线的颜色设定;

(2). 对折线的拐点样式进行修改设置(拐点大小;拐点背景颜色);达到所求;

(3). 坐标轴的样式(颜色,旋转-适用于内容较多时的完整显示,例如时间)。



你可能感兴趣的:(echarts-折线图(折线虚实/颜色与拐点样式修改))