浅谈 echarts 数据可视化开发

Apache ECharts

一个基于 JavaScript 的开源可视化图表库

同类型产品还有：hightCharts 、D3

echarts步骤

 1. 初始化 

        var echart = echarts.init(dom节点,主题)

 2. 设置选项option参数 

        const option = {
                title  标题
                legend  图例
                color  调试版本
                tooltip  提示
                xAxis  轴线X
                yAxis  轴线Y
                series  系列数据
        }

			var option = {
				title:{
					text:"第一个表格"	//标题
				},
				legend:{data:["成绩","平均成绩","80分以上人数","题型"]},	//图例
				tooltip:{},		//鼠标提示
				xAxis:{data:["3.1","3.2","3.3","3.4","3.5"]},		//x轴线
				yAxis:{},		//y轴线
				series:[	//图数据
					{type:"line",data:[90,60,55,32,25],name:"平均成绩",smooth:true},

				]
			}

 3. 更新选项option 

        echart.setOption(option)

选项

 标题  title

        text  文本

 图例  legend

        {data:["name1","name2"]}

 提示  tooltip   

•    trigger:"axis"  轴线
•    trigger:"item"  item元素

 轴线X  xAxis 

        {data:["x1","x2",...]}

 轴线Y  yAxis 

        {data:["y1","y2",...]}

系列数据  series 

• bar  柱状图

{name:"名称",type:"bar",data:[10,{value:10}],itemStyle:{color:xxx}}

• line  线

{name:"名称"，type:"line",smooth:true, //平滑areaStyle:面的样式,lineStyle：线的样式}

• pie  饼状图

{
    name:"名称",
    type:"pie",
    radius:["10%","50%"],    //半径
    data:[{name:"n1",value:40},{name:"n2",value:60}],
    left:"",        //位置
    top:""
}

图表的类型  type

• 柱状图
• 线
• 平滑线
• 面
• 饼形图

颜色样式控制

主题

• 默认
• dark 深色
• light 亮色

自定义主题

1. https://echarts.apache.org/zh/theme-builder.html
2. 下载并引用
3. 初始化的时候 ：init(dom,“主题名称”)

调色板

    color:[颜色数组]

itemStyle

• 具体数据  data:[{value:50,itemStyle:样式}]
• 系列数据  {name:"分析表",data:[],itemStyle:{}}

        normal:{正常样式}
        emphasis:{强调样式}

特殊样式

线

        lineStyle:{width:"10px",cap:"round"}   //10像素，端点 平滑

柱状图

        itemStyle:{borderRadius:[100,100,100,100]}   //圆角，左上，右上 ，右下，左下

渐变颜色

var mycolor1 =  {
    type: 'linear',
    x: 0,
    y: 0,
     x2: 0,
    y2: 1,
    colorStops: [{
         offset: 0, color: 'rgba(23, 135, 255, 1)' // 0% 处的颜色
    }, {
         offset: .7, color: 'rgba(27, 201, 249,1)' // 100% 处的颜色
     }],
     global: false // 缺省为 false
		}

堆叠图

    {name:"ui",data:[],stack:true},
    {name:"web",data:[],stack:true}

富文本

rich

        rich:{big:{fontSize:"24px"}}
        使用：formatter:"{big|中国}"   把“中国”二字给big样式

formatter

• {a}  系列名称
• {b} 名称
• {c}  值
• {d} 百分百

position

    "center","insideRight"   //中间 内部右侧

show:false