电商商城定制开发echarts全解析及其用法详解

一、echarts简介

电商商城定制开发百度开发团队制作，电商商城定制开发开源交给基金管理
制作图表的JavaScript库
同类型产品highCharts D3

二、echarts步骤

初始化
    var = echarts.init(dom节点,主题)

定义选项option
    var option = {
title标题
图例
color调试版本
tooltip提示
xAxis轴线X
yAxis轴线Y
系列数据
}

更新选项
    echart.setOption(option)

 三、选项

1.标题title
 text文本

2.图例legend
    {data:["name1","name2"]}

3.提示tooltip
    name: "问答题"

4.X轴线
    {data:["x1","x2",...]}

5.Y轴线
    {data:["y1","y2",...]}

6.系列数据
bar
    {
name:'名称',
type:'bar',
}

 line
    {
name:'名称',
type:'bar',
smooth:'true',
areaStyle:'面的样式',
}

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

 四、图表的类型

柱状图
    type: "bar"

线形图
    type: "line"

平滑线形图
    type: "line"
smooth: true

面型图
    type: "line",
areaStyle:{color: 'pink'}

饼形图
    type: "pie",

五、颜色样式的控制

主题
    light亮色
dark暗色

 

自定义主题
                var echart = echarts.init(document.getElementById("container"),"purple-passion");

调色板
    color:["#516b91","#c24fa1","#5af421","#824d11","#bac291","#51a291","#6b4f91","#542211",],

 itemStyle
    具体数据
        data:[{value:50,itemStyle:样式}]
    系列数据
        {name:"分析表",data:[],itemStyle:{}}
    normal:{正常样式}
    emphasis:{强调样式}