echart生成折柱图画垂直线段代码并预留出来
时间: 2023-04-07 11:04:23 浏览: 66
以下是代码示例,可以生成折柱图并画出垂直线段:
```javascript
// 引入echarts
import echarts from 'echarts';
// 初始化echarts实例
const myChart = echarts.init(document.getElementById('myChart'));
// 定义数据
const data = [120, 200, 150, 80, 70, 110, 130];
// 定义x轴数据
const xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
// 定义y轴数据
const yData = ['Sales'];
// 定义折线图数据
const lineData = {
name: 'Sales',
type: 'line',
data: data,
yAxisIndex: 0,
itemStyle: {
color: '#007bff'
},
lineStyle: {
color: '#007bff'
}
};
// 定义柱状图数据
const barData = {
name: 'Sales',
type: 'bar',
data: data,
yAxisIndex: 1,
itemStyle: {
color: '#28a745'
}
};
// 定义y轴
const yAxis = [
{
type: 'value',
name: 'Sales',
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: 'Sales',
axisLabel: {
formatter: '{value}'
}
}
];
// 定义x轴
const xAxis = {
type: 'category',
data: xData
};
// 定义图表配置项
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: yData
},
xAxis: xAxis,
yAxis: yAxis,
series: [lineData, barData]
};
// 设置图表配置项并渲染图表
myChart.setOption(option);
// 画垂直线段
myChart.setOption({
graphic: {
type: 'line',
left: '50%',
top: '10%',
bottom: '10%',
style: {
stroke: '#dc3545',
lineWidth: 2
},
shape: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
}
}
});
```
希望能对你有所帮助!
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)