echars各种图表

 图表vue文件：

<div class="content"><div class="tit"><h1>数据统计</h1><span>Data statistics</span></div><div class="charts"><div class="chart-item"><div class="tit">数据统计标题</div><div class="chart" id="chart1"></div></div><div class="chart-item"><div class="tit">数据统计标题</div><div class="chart" id="chart2"></div></div><div class="chart-item"><div class="tit">数据统计标题</div><div class="chart" id="chart3"></div></div><div class="chart-item"><div class="tit">数据统计标题</div><div class="chart" id="chart4"><div class="chart-li">数据名称标题<span>00</span>单位</div><div class="chart-li">数据名称标题<span>00</span>单位</div><div class="chart-li">数据名称标题<span>00</span>单位</div><div class="chart-li">数据名称标题<span>00</span>单位</div><div class="chart-li">数据名称标题<span>00</span>单位</div><div class="chart-li">数据名称标题<span>00</span>单位</div><div class="chart-li">数据名称标题<span>00</span>单位</div><div class="chart-li">数据名称标题<span>00</span>单位</div></div></div><div class="chart-item"><div class="tit">数据统计标题</div><div class="chart" id="chart5"></div></div><div class="chart-item"><div class="tit">数据统计标题</div><div class="chart" id="chart6"></div></div><div class="chart-item"><div class="tit">数据统计标题</div><div class="chart" id="chart7"></div></div><div class="chart-item"><div class="tit">数据统计标题</div><div class="chart" id="chart8"></div></div><div class="chart-item"><div class="tit">数据统计标题</div><div class="chart" id="chart9"></div></div></div></div>

样式调整 scss：

.charts {width: 1000px;margin: 0 auto;.chart-item {width: 30%;height: 250px;display: inline-block;vertical-align: middle;margin: 10px;.tit {text-align: left;border-bottom: #000 1px solid;color: #198fec;font-size: 18px;}.chart {width: 100%;height: 180px;.chart-li {width: 145px;color: #333;font-size: 12px;line-height: 40px;display: inline-block;span {font-size: 24px;color: #198fec;font-weight: 600;}}}}
}

js配置数据：

myColorList = ["#71c7d5","#6ec3ad","#6dbb5c","#40b263","#1b923b","#198fec","#ff9933","#ffff8e","#ff6f8e","#ff6fff"
]option1 = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {orient: 'vertical',right: 10,top: 60,bottom: 30,data: ["数据名称一", "数据名称二", "数据名称三", "数据名称四"]},series: [{name: '数据值',type: 'pie',radius: '75%',center: ['30%', '45%'],data: [{ value: 335, name: '数据名称一' },{ value: 310, name: '数据名称二' },{ value: 234, name: '数据名称三' },{ value: 135, name: '数据名称四' }],label: {normal: {show: false,position: 'center'}},labelLine: {normal: {show: false}},itemStyle: {emphasis: {shadowBlur: 5,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},normal: {color: function(params) {//自定义颜色var colorList = myColorListreturn colorList[params.dataIndex]}}}}]
};
option2 = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: ["数据名称四", "数据名称三", "数据名称二", "数据名称一"]},series: [{name: '数据',type: 'bar',data: [30, 30, 80, 100],itemStyle: {normal: {color: function(params) {//自定义颜色var colorList = myColorListreturn colorList[params.dataIndex]}}}}]
};
option3 = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'value',boundaryGap: [0, 0.01]},yAxis: {type: 'category',data: ["数据名称四", "数据名称三", "数据名称二", "数据名称一"]},series: [{name: '数据',type: 'bar',data: [50, 30, 80, 100],itemStyle: {normal: {color: function(params) {//自定义颜色var colorList = myColorListreturn colorList[params.dataIndex]}}}}]
};
// option4={};
option5 = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['数据一', '数据二']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']}],yAxis: [{type: 'value'}],series: [{name: '数据一',type: 'line',symbol: 'none',// stack: '总量',data: [120, 132, 101, 134, 90, 230, 210],color: ['#6dbb5c'], //折线颜色areaStyle: {normal: {color: '#6dbb5c'}},},{name: '数据二',type: 'line',symbol: 'none',// stack: '总量',label: {normal: {show: true,position: 'top'}},data: [220, 182, 191, 234, 290, 330, 310],color: ['#6ec3ad'], //折线颜色,areaStyle: {normal: {color: '#6ec3ad'}}}]
};
option6 = {tooltip: {trigger: 'axis'},legend: {data: ['邮件', '广告', '视频', '访问']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {type: 'value'},series: [{name: '邮件',type: 'line',smooth: true,symbol: 'none',color: ['#71c7d5'], //折线颜色data: [120, 132, 101, 134, 90, 230, 210]},{name: '广告',type: 'line',smooth: true,symbol: 'none',color: ['#6ec3ad'], //折线颜色data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频',type: 'line',smooth: true,symbol: 'none',color: ['#6dbb5c'], //折线颜色data: [150, 232, 201, 154, 190, 330, 410]},{name: '访问',type: 'line',smooth: true,symbol: 'none',color: ['#40b263'], //折线颜色data: [320, 332, 301, 334, 390, 330, 320]}]
};
option7 = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {orient: 'vertical',right: 10,top: 60,bottom: 30,data: ["数据名称一", "数据名称二", "数据名称三", "数据名称四"]},series: [{name: '数据值',type: 'pie',radius: ['30%', '75%'],center: ['30%', '45%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center'},emphasis: {show: true,textStyle: {fontSize: '12',fontWeight: 'bold'}}},labelLine: {normal: {show: false}},data: [{ value: 335, name: '数据名称一' },{ value: 310, name: '数据名称二' },{ value: 234, name: '数据名称三' },{ value: 135, name: '数据名称四' }],itemStyle: {emphasis: {shadowBlur: 5,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},normal: {color: function(params) {//自定义颜色var colorList = myColorListreturn colorList[params.dataIndex]}}}}]
};
option8 = {color: ['#3398DB'],grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value'}],series: [{name: '直接访问',type: 'bar',barWidth: '60%',data: [220, 52, 200, 334, 390, 330, 60],itemStyle: {normal: {color: function(params) {//自定义颜色var colorList = myColorListreturn colorList[params.dataIndex]}}}}]
};
option9 = {tooltip: {trigger: 'axis'},xAxis: {type: 'category',boundaryGap: false,data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']},yAxis: {type: 'value'},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},series: [{data: [10, 90, 61, 34, 90, 30, 60, 34, 90, 30, 20],type: 'line',smooth: true,symbol: 'none',color: ['#71c7d5'], //折线颜色areaStyle: {}}]
};// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
var myChart2 = echarts.init(document.getElementById('chart2'));
var myChart3 = echarts.init(document.getElementById('chart3'));
// var myChart4 = echarts.init(document.getElementById('chart4'));
var myChart5 = echarts.init(document.getElementById('chart5'));
var myChart6 = echarts.init(document.getElementById('chart6'));
var myChart7 = echarts.init(document.getElementById('chart7'));
var myChart8 = echarts.init(document.getElementById('chart8'));
var myChart9 = echarts.init(document.getElementById('chart9'));
// 用指定的配置项和数据显示图表。
myChart1.setOption(option1);
myChart2.setOption(option2);
myChart3.setOption(option3);
// myChart4.setOption(option4);
myChart5.setOption(option5);
myChart6.setOption(option6);
myChart7.setOption(option7);
myChart8.setOption(option8);
myChart9.setOption(option9);