一、先说在原生里怎么使用echarts
<!-- 1.引入echarts文件 -->
<script src="echarts.min.js"></script>
<!-- 准备容器 -->
<div style="width: 600px;height:400px;" id="main"></div>
//基于dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))
//制定图表的配置项和数据
var option = { }
//使用配置项显示图表
myChart.setOption(option)
二、在vue中使用vue-echarts
// 引入vue-echarts
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
Vue.component('chart', ECharts)
//在build/webpack.base.conf.js中修改成如下东西
{
test: /\.js$/, loader: 'babel-loader', + include: [ + resolve('src'), + resolve('test'), + resolve('node_modules/vue-echarts'), + resolve('node_modules/resize-detector') + ] }
//在.vue文件中使用
<div class="left-bottom">
<div class="title">系统访问量</div>
<chart style="width: 100%;height: 13rem;position: absolute;top: -2%;" :options="line"></chart>
</div>
//配置
line: {
legend: { // 图例组件颜色配置
data: [
{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},
{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},
{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}},
{name: '一二三四五六 ', icon: 'circle', textStyle: {color: '#fff'}}
]
},
grid: { // 网格
left: '-2.3%',
right: '1.6%',
bottom: '10%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
splitLine: { // 保留网格线
show: true,
lineStyle: {
color: '#666'
}
},
splitArea: { // 去除网格区域
show: false,
lineStyle: {
color: '#666'
}
},
type: 'category',
boundaryGap: false,
axisLine: { // 坐标轴
lineStyle: {
color: '#ccc'
}
},
axisTick: { // 坐标轴刻度设置
inside: true,
interval: 0
},
axisLabel: {
interval: 0,
fontSize: 8
},
data: ['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00',
'20:00', '21:00', '22:00', '23:00', '24:00', '01:00', '02:00', '03:00', '04:00', '05:00',
'']
},
yAxis: {
min: 1000,
splitLine: { // 保留网格线
show: true,
lineStyle: {
color: '#666'
}
},
splitArea: { // 去除网格区域
show: false,
lineStyle: {
color: '#666'
}
},
type: 'value',
axisLabel: {
interval: '0',
fontSize: 8.5
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisTick: {
inside: true
},
data: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000]
},
series: [
{
name: '一二三四五六 ',
type: 'line',
stack: '总量',
symbol: 'circle',
symbolSize: 7,
itemStyle: {
normal: {
color: '#00ff7e',
lineStyle: {
color: '#00ff7e'
}
}
},
data: [1700, 1720, 1010, 1340, 900, 2300, 2100, 1500]
},
{
name: '一二三四五六 ',
type: 'line',
stack: '总量',
symbol: 'circle',
symbolSize: 7,
itemStyle: {
normal: {
color: '#0060ff',
lineStyle: {
color: '#0060ff'
}
}
},
data: [1200, 1820, 1910, 2304, 2090, 3040, 3010, 3000]
},
{
name: '一二三四五六 ',
type: 'line',
stack: '总量',
symbol: 'circle',
symbolSize: 7,
itemStyle: {
normal: {
color: '#00ccff',
lineStyle: {
color: '#00ccff'
}
}
},
data: [1500, 2320, 2010, 1054, 1900, 3300, 3100, 3500]
},
{
name: '一二三四五六 ',
type: 'line',
stack: '总量',
symbol: 'circle',
symbolSize: 7,
itemStyle: {
normal: {
color: '#ffae00',
lineStyle: {
color: '#ffae00'
}
}
},
data: [1200, 3320, 301, 3304, 3900, 330, 3200, 3050]
}
]
}
line2: {
legend: {
// 图例组件颜色配置
data: [
{
name:
'一二三四五六 ',
icon:
'circle',
textStyle: {
color:
'#fff'}},
{
name:
'一二三四五六 ',
icon:
'circle',
textStyle: {
color:
'#fff'}},
{
name:
'一二三四五六 ',
icon:
'circle',
textStyle: {
color:
'#fff'}},
{
name:
'一二三四五六 ',
icon:
'circle',
textStyle: {
color:
'#fff'}}
]
},
grid: {
// 网格
left:
'-2.3%',
right:
'1.6%',
bottom:
'10%',
containLabel:
true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
splitLine: {
// 保留网格线
show:
true,
lineStyle: {
color:
'#666'
}
},
splitArea: {
// 去除网格区域
show:
false,
lineStyle: {
color:
'#666'
}
},
type:
'category',
boundaryGap:
false,
axisLine: {
// 坐标轴
lineStyle: {
color:
'#ccc'
}
},
axisTick: {
// 坐标轴刻度设置
inside:
true,
interval:
0
},
axisLabel: {
interval:
0,
fontSize:
8
},
data: [
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00',
'24:00',
'01:00',
'02:00',
'03:00',
'04:00',
'05:00',
'']
},
yAxis: {
min:
1000,
splitLine: {
// 保留网格线
show:
true,
lineStyle: {
color:
'#666'
}
},
splitArea: {
// 去除网格区域
show:
false,
lineStyle: {
color:
'#666'
}
},
type:
'value',
axisLabel: {
interval:
'0',
fontSize:
8.5
},
axisLine: {
lineStyle: {
color:
'#ccc'
}
},
axisTick: {
inside:
true
},
data: [
1000,
2000,
3000,
4000,
5000,
6000,
7000,
8000,
9000]
},
series: [
{
name:
'一二三四五六 ',
type:
'line',
stack:
'总量',
symbol:
'none',
itemStyle: {
normal: {
color:
'rgba(0, 254, 116, 0.3)',
lineStyle: {
color:
'#00ff7e'
}
}
},
areaStyle: {
normal: {}},
data: [
1700,
1720,
1010,
1340,
900,
2300,
2100,
1500,
1100]
},
{
name:
'一二三四五六 ',
type:
'line',
stack:
'总量',
symbol:
'none',
itemStyle: {
normal: {
color:
'rgba(0, 109, 255, 0.3)',
lineStyle: {
color:
'#0060ff'
}
}
},
areaStyle: {
normal: {}},
data: [
1200,
1820,
1910,
2304,
2090,
3040,
3010,
3000,
1500]
},
{
name:
'一二三四五六 ',
type:
'line',
stack:
'总量',
symbol:
'none',
itemStyle: {
normal: {
color:
'rgba(0, 204, 255, 0.3)',
lineStyle: {
color:
'#00ccff'
}
}
},
areaStyle: {
normal: {}},
data: [
1500,
2320,
2010,
1054,
1900,
3300,
3100,
3500,
2000]
},
{
name:
'一二三四五六 ',
type:
'line',
stack:
'总量',
symbol:
'none',
itemStyle: {
normal: {
color:
'rgba(255, 174, 0, 0.3)',
lineStyle: {
color:
'#ffae00'
}
}
},
areaStyle: {
normal: {}},
data: [
1200,
3320,
1301,
2304,
2900,
3300,
2200,
1050,
2500]
}
]
}