echarts简介

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

echarts

1.初始化

var echart = echarts.initial（dom节点，主题）

2.定义选项option

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

3.更新选项

echart.setOption（option）

选项

标题title      text 文本
图例legend    {data：["name1","name2"]}
提示tooltip
x轴线{data:["x1","x2"...]}
y轴线{[data:["y1","y2"...]]}

系列数据

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

line
{
    name:"名称"，
    type:"bar",
    data:["line"],
    smocth:true //平滑
    areaStyle： 面的样式
    lineStyle：线的样式
}

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

图表的类型

type

柱状图
线
平滑线
面
饼形图

颜色样式控制

主题

默认
dark 深色
light 亮色

自定义主题

https://echarts.apache.org/zh/theme-builder.html
下载并引用
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}

富文本label

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

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

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

地图

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

echarts.registerMap(name,res)