浅谈 echarts数据可视化

echarts简介

百度开发团队制作，开源交个apache基金管理，制作图表的javascript库，同类型产品hightCharts D3

echarts步骤

1.初始化

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

2.定义选项option

3.更新选项

图表的类型 type

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

颜色样式控制

主题

• 默认
• dark 深色
• light 亮色

 自定义主题

1. https://echarts.apache.org/zh/theme-builder.html
2. 下载并引用
3. init(dom，“主题名称”)

    调色板

• color:[颜色数组]

    itemStyle

•         具体数据  data:[{value:50,itemStyle:样式}]
•         系列数据  data:{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(85, 255, 255, 1)' // 0% 处的颜色
                 }, {
                     offset: .7, color: 'rgba(170, 255, 255, 0.7)' // 100% 处的颜色
                 }],
                 global: false // 缺省为 false
            }

堆叠图

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

地图

getMap
        {name:"china",type:"map",mapType:"china",data:[{name:"",value:100}]}
        fatch(url)
.then(res=>res.json())
.then(res=>{
    echart.registerMap("china",res)
    option.series[0].mapType("china")
    echart.setOption(option)
})
    echarts.registerMap(name,res)